diff --git a/output/timetable.js b/output/timetable.js
index f8a7ec1..02792ca 100644
--- a/output/timetable.js
+++ b/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();
diff --git a/rota_generator/shifts.py b/rota_generator/shifts.py
index f5a2dd3..70927c1 100644
--- a/rota_generator/shifts.py
+++ b/rota_generator/shifts.py
@@ -5222,8 +5222,10 @@ class RotaBuilder(object):
 
         timetable = []
 
+        # Run times and heading go outside the table; store for later insertion
+        run_times_html = ""
         if self.run_start_time is not None and self.run_end_time is not None:
-            timetable.append(
+            run_times_html = (
                 "<div id='run_times_row' style='display: flex; gap: 2em; margin-bottom: 1em;'>"
                 f"<div id='run_start_time_cell'>Start time: <span id='run_start_time'>{self.run_start_time:%Y-%m-%d %H:%M:%S%z}</span></div>"
                 f"<div id='run_end_time_cell'>End time: <span id='run_end_time'>{self.run_end_time:%Y-%m-%d %H:%M:%S%z}</span></div>"
@@ -5231,9 +5233,7 @@ class RotaBuilder(object):
                 "</div>"
             )
 
-        timetable.append(
-            f"<h2>Rota start date: {self.start_date.isoformat()} ({self.weeks[-1]} weeks)</h2>"
-        )
+        heading_html = f"<h2>Rota start date: {self.start_date.isoformat()} ({self.weeks[-1]} weeks)</h2>"
 
         date_row = ["<th class='worker'></th>"]
 
@@ -5249,7 +5249,8 @@ class RotaBuilder(object):
                 f"<th title='{d}' class='{th_class}' data-date='{d}'>Week {week}: {day}</th>"
             )
             n = n + 1
-        timetable.append(f"<tr class='data-row'>{''.join(date_row)}</tr>")
+        # Header row (dates) should be placed in a proper thead
+        header_row_html = f"<thead><tr class='data-row'>{''.join(date_row)}</tr></thead>"
 
         current_site = ""
 
@@ -5675,7 +5676,8 @@ class RotaBuilder(object):
         else:
             result_string = "Rota not run"
 
-        joined_timetable = "\n".join(timetable)
+        # Wrap the remaining rows in a tbody and prepend the thead
+        joined_timetable = header_row_html + "\n<tbody>\n" + "\n".join(timetable) + "\n</tbody>"
 
         hard_constrain_shift_info = []
         for worker in self.workers:
@@ -5781,6 +5783,8 @@ class RotaBuilder(object):
         html = f""" 
         <body>
         <div class="table-div" id="{table_name}">
+        {run_times_html}
+        {heading_html}
         <table id="main-table">{joined_timetable}</table>
         </div>
         {warnings_html}
