add sticky row and column headers to the spreadsheet table

Switch from border-collapse:collapse to separate+border-spacing:0 with
directional borders (right+bottom per cell, top+left on table) to keep
the same visual while allowing position:sticky to work. Column headers
stick to top, row number headers stick to left, corner cell sticks both.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/resources/public/site.css

@@ -67,13 +67,37 @@ a:hover {
 }
 
 table {
-    border-collapse: collapse;
+    border-collapse: separate;
+    border-spacing: 0;
+    border-top: 1px solid black;
+    border-left: 1px solid black;
 }
 
 td, th {
-    border: 1px solid black;
+    border-right: 1px solid black;
+    border-bottom: 1px solid black;
     padding: 0;
 }
+
+/* Sticky column headers (top row) */
+#main-table tr:first-child th {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    background: white;
+}
+/* Sticky row headers (left column) */
+#main-table tr:not(:first-child) th {
+    position: sticky;
+    left: 0;
+    z-index: 1;
+    background: white;
+}
+/* Corner cell: sticky in both directions */
+#main-table tr:first-child th:first-child {
+    left: 0;
+    z-index: 2;
+}
 th {
     text-align: center;
     min-width: 40px;