fix: restore HTML datatable scroll and print layout

- remove forced table width so scrollX can size columns
- allow overflow-x only on screen and expand tables for print
- adjust columns on window resize to keep headers aligned

Author: schivmeister

dqgen/resources/html_templates/static/layout.html

@@ -63,7 +63,7 @@
         }
 
         table.display {
-            width: 100% !important;
+            width: auto;
             min-width: 100%;
         }
 
@@ -72,11 +72,15 @@
                 visibility: hidden;
             }
 
-            #print-container {
-                width: 100% !important;
-                position: absolute;
-                left: 0;
-                top: 0;
+            #print-container,
+            .dataTables_wrapper,
+            .dataTables_scrollHead,
+            .dataTables_scrollBody {
+                overflow: visible !important;
+                width: auto !important;
+            }
+            table.display {
+                width: auto !important;
             }
 
             footer {
@@ -130,15 +134,18 @@ <h1 class="ui header center aligned reportTitle" id="skip-toc">{{ conf.title }}<
 <script type="text/javascript">
     $(document).ready(function () {
 
-        $("table.display").DataTable({
+        const table = $("table.display").DataTable({
             dom: 'B<"clear">lfrtip',
-            buttons: [
-                'print'
-            ],
-            "lengthMenu": [[5, 15, 30, -1], [5, 15, 30, "All"]],
+            buttons: ['print'],
+            lengthMenu: [[5, 15, 30, -1], [5, 15, 30, "All"]],
             scrollX: true,
             autoWidth: false
         });
+
+        $(window).on('resize', function () {
+            table.columns.adjust();
+        });
+
         $("h2").each(function () {
             if (!$(this).next().is("section") && !$(this).next().is("h3") && !$(this).next().hasClass("dataTables_wrapper")) {
                 $(this).remove();