diff --git a/index.html b/index.html
index 3f64e1bde9..e8361c254f 100644
--- a/index.html
+++ b/index.html
@@ -299,6 +299,29 @@
             padding: 0.1rem 0.5rem 0.1rem 0.5rem;
         }
 
+        /* The query checkbox and number stay put while the table is scrolled
+           horizontally, so it is always clear which query a row belongs to.
+           The outline covers the table's 1px border-spacing and the
+           pseudo-element covers the body padding left of the table — without
+           them the cells scrolling underneath shine through around it. */
+        #details .details-query {
+            position: sticky;
+            left: 0;
+            z-index: 1;
+            background-color: var(--background-color);
+            outline: 1px solid var(--background-color);
+        }
+
+        #details .details-query::before {
+            content: '';
+            position: absolute;
+            top: -1px;
+            bottom: -1px;
+            right: 100%;
+            width: 100vw;
+            background-color: var(--background-color);
+        }
+
         .shadow:hover {
             box-shadow: 0 0 1rem var(--shadow-color);
             position: relative;
@@ -339,7 +362,6 @@
         .tooltip-query {
             left: 0;
             width: 40rem;
-            margin-left: -3rem;
         }
 
         .note:hover .tooltip, .note:active .tooltip {
@@ -361,8 +383,7 @@
         }
 
         .tooltip-query::after {
-            left: 3rem;
-            margin-left: 0.5rem;
+            left: 0.5rem;
         }
 
         .nowrap {
@@ -1164,16 +1185,15 @@ <h2>Detailed Comparison</h2>
         let th_checkbox = document.createElement('th');
         let checkbox = document.createElement('input');
         checkbox.type = 'checkbox';
-        checkbox.checked = true;
+        checkbox.checked = selectors.queries.every(selected => selected);
         checkbox.addEventListener('change', e => {
-            [...document.querySelectorAll('.query-checkbox')].map(elem => { elem.checked = e.target.checked });
-            selectors.queries.map((_, i) => { selectors.queries[i] = e.target.checked });
-            renderSummary(filtered_data);
+            selectors.queries.fill(e.target.checked);
+            render();
             updateHistory();
         });
+        th_checkbox.className = 'details-query';
         th_checkbox.appendChild(checkbox);
         details_head.appendChild(th_checkbox);
-        details_head.appendChild(document.createElement('th'));
     }
 
     /// Table header
@@ -1194,7 +1214,7 @@ <h2>Detailed Comparison</h2>
         tr.className = 'shadow';
 
         let td_title = document.createElement('td');
-        td_title.colSpan = 2;
+        td_title.className = 'details-query';
         td_title.appendChild(document.createTextNode('Load time: '));
         tr.appendChild(td_title);
 
@@ -1219,7 +1239,7 @@ <h2>Detailed Comparison</h2>
         tr.className = 'shadow';
 
         let td_title = document.createElement('td');
-        td_title.colSpan = 2;
+        td_title.className = 'details-query';
         td_title.appendChild(document.createTextNode('Data size: '));
         tr.appendChild(td_title);
 
@@ -1245,29 +1265,32 @@ <h2>Detailed Comparison</h2>
         let tr = document.createElement('tr');
         tr.className = 'shadow';
 
-        let td_checkbox = document.createElement('td');
+        let td_query = document.createElement('td');
+        td_query.className = 'details-query';
+
         let checkbox = document.createElement('input');
         checkbox.type = 'checkbox';
         checkbox.className = 'query-checkbox';
         checkbox.checked = selectors.queries[query_num];
         checkbox.addEventListener('change', e => {
             selectors.queries[query_num] = e.target.checked;
-            renderSummary(filtered_data);
+            render();
             updateHistory();
         });
-        td_checkbox.appendChild(checkbox);
-        tr.appendChild(td_checkbox);
+        td_query.appendChild(checkbox);
 
-        let td_query_num = document.createElement('td');
-        td_query_num.className = 'note';
-        td_query_num.appendChild(document.createTextNode(`Q${query_num}. `));
+        /// Padded to a fixed width so the checkboxes of Q0..Q9 line up with the rest.
+        let query_name = document.createElement('span');
+        query_name.className = 'note';
+        query_name.appendChild(document.createTextNode(` ${`Q${query_num}.`.padStart(4)}`));
 
         let tooltip = document.createElement('span');
         tooltip.className = 'tooltip tooltip-query';
         tooltip.appendChild(document.createTextNode(`Query ${query_num}: ${queries[query_num]}`));
-        td_query_num.appendChild(tooltip);
+        query_name.appendChild(tooltip);
 
-        tr.appendChild(td_query_num);
+        td_query.appendChild(query_name);
+        tr.appendChild(td_query);
 
         sorted_indices.map(idx => {
             const curr_timing = selectRun(filtered_data[idx].result[query_num], selectors.metric);