table: column and row header while scrollingHEADmain

1 files changed, 22 insertions, 2 deletions

diff --git a/table.tmpl b/table.tmpl
index a687df3..774bfa6 100644
--- a/table.tmpl
+++ b/table.tmpl
@@ -11,8 +11,24 @@ body {
 }
 table {
   background: white;
-  border-collapse: collapse;
+  table-layout: fixed;
+  border-collapse: separate;
+  border-spacing: 0;
+  border: 1px solid grey;
+}
+table thead th {
+    position: sticky;
+    background: #ffe;
+    top: 0;
+    z-index: 2;
+}
+table tbody th  {
+    position: sticky;
+    left: 0;
+    background: #ffe;
+    z-index: 1;
 }
+
 th, td {
   padding: 8px;
   border: 1px solid #ddd;
@@ -27,7 +43,7 @@ th.side {
   max-width: 11em;
 }
 tr:hover {
-  background: #efefef;
+  background: #eee;
 }
 .feature {
   background: powderblue;
@@ -97,6 +113,7 @@ details[open].issue {
     {{- range $top.Tags -}}<button>{{ . }}</button>{{- end -}}
     </p-->
     <table>
+      <thead>
       <tr>
         <th class="side"></th>
         {{- range $version := $versions }}
@@ -111,6 +128,8 @@ details[open].issue {
           </th>
         {{- end}}
       </tr>
+      </thead>
+      <tbody>
       {{- range $cat := $top.Categories }}
       <tr>
         <th class="side">{{ . }}</th>
@@ -153,6 +172,7 @@ details[open].issue {
         {{ end }}
       </tr>
       {{- end}}
+      </tbody>
     </table>
     <p>
     Total: {{ len $features }} features and {{ len $issues }} issues.