table: column and row header while scrolling

This commit is contained in:
Özgür Kesim 2024-11-08 16:38:29 +01:00
parent dec70c98a8
commit 3510a3590a
Signed by: oec
GPG Key ID: F136A7F922D018D7

View File

@ -11,8 +11,24 @@ body {
} }
table { table {
background: white; 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 { th, td {
padding: 8px; padding: 8px;
border: 1px solid #ddd; border: 1px solid #ddd;
@ -27,7 +43,7 @@ th.side {
max-width: 11em; max-width: 11em;
} }
tr:hover { tr:hover {
background: #efefef; background: #eee;
} }
.feature { .feature {
background: powderblue; background: powderblue;
@ -97,6 +113,7 @@ details[open].issue {
{{- range $top.Tags -}}<button>{{ . }}</button>{{- end -}} {{- range $top.Tags -}}<button>{{ . }}</button>{{- end -}}
</p--> </p-->
<table> <table>
<thead>
<tr> <tr>
<th class="side"></th> <th class="side"></th>
{{- range $version := $versions }} {{- range $version := $versions }}
@ -111,6 +128,8 @@ details[open].issue {
</th> </th>
{{- end}} {{- end}}
</tr> </tr>
</thead>
<tbody>
{{- range $cat := $top.Categories }} {{- range $cat := $top.Categories }}
<tr> <tr>
<th class="side">{{ . }}</th> <th class="side">{{ . }}</th>
@ -153,6 +172,7 @@ details[open].issue {
{{ end }} {{ end }}
</tr> </tr>
{{- end}} {{- end}}
</tbody>
</table> </table>
<p> <p>
Total: {{ len $features }} features and {{ len $issues }} issues. Total: {{ len $features }} features and {{ len $issues }} issues.