Refactor timetable and shifts generation to ensure proper HTML structure with sticky headers

output/timetable.js

@@ -1729,6 +1729,16 @@ function syntaxHighlight(json) {
     const mainTable = document.getElementById("main-table");
     if (!mainTable) return;
 
+    // Ensure the header row is inside a proper <thead> element.
+    // Some exports use a bare <tr> as the first row; move it into a thead so CSS/sticky headers work.
+    if (!mainTable.tHead) {
+        const firstRow = mainTable.querySelector('tr');
+        if (firstRow) {
+            const thead = mainTable.createTHead();
+            thead.appendChild(firstRow);
+        }
+    }
+
     // Helper to remove highlight from all headers
     function clearColHover() {
         const ths = mainTable.querySelectorAll("th.col-hover");
@@ -1763,6 +1773,18 @@ $("#main-table").before(
     `<button id="show-display-settings" style="margin:8px 0 8px 0; float:right;">Display Settings</button>`
 );
 
+// Ensure main table header is sticky and compact
+if ($('#main-table-style').length === 0) {
+    $('head').append(`
+        <style id='main-table-style'>
+            /* Make main timetable header sticky */
+            #main-table thead th, #main-table thead td { position: sticky; top: 0; z-index: 60; background: #fff; font-size: 12px; }
+            /* Slight shadow to separate header from body */
+            #main-table thead th { box-shadow: 0 2px 6px rgba(0,0,0,0.06); }
+        </style>
+    `);
+}
+
 // --- Modal show/hide logic ---
 $("#show-display-settings").on("click", function() {
     $("#display-settings-modal").show();