Here's a CSS riddle: can we have frozen rows and columns on an HTML <table>
element?
Over the years, I've spent a lot of time thinking about this problem, while developing a UI widget framework. The most used widget in UI frameworks is the Grid component (also known as a Data Table, or just Table), and one of its most notorious features is the so-called "frozen" headers. These are headers which always stay in place when you scroll the content. Mind you, this was before position: sticky
existed, and usually required some form of JavaScript-based synchronization of rows and headers 😱
So, today I noticed a question on Reddit that asked the same, and decided to give it a try:
As it turns out, position: sticky
works wonders!
The gist of the approach is to set sticky positioning on header cells. They require also a background, so that scrolled contents don't show through them:
<div class="wrapper">
<table>
<thead>
<tr>
<th></th>
<th>column 1</th>
<th>column 2</th>
<!-- ... -->
</tr>
</thead>
<tbody>
<tr>
<th>row 1</th>
<td>scroll</td>
<td>scroll</td>
<!-- ... -->
</tr>
<!-- ... -->
</tbody>
</table>
</div>
.wrapper {
width: 320px;
height: 200px;
overflow: auto;
position: relative;
}
table {
table-layout: fixed;
}
thead,
tr>th {
position: sticky;
background: #fff;
}
thead {
top: 0;
z-index: 2;
}
tr>th {
left: 0;
z-index: 1;
}
thead tr>th:first-child {
z-index: 3;
}
Some gotchas:
- Column widths are determined from cell contents. This means that each cell might require an additional element. That is a good idea, since it allows using
text-overflow: ellipsis
for cell values. - Cell borders require some work to behave consistently, as sticky headers resize during scrolling. See full listing below.
Full source listing
.wrapper { border: 1px solid #ccc; background: #eee; width: 320px; height: 200px; overflow: auto; position: relative; } table { border-spacing: 0; white-space: nowrap; table-layout: fixed; } thead, tr>th { position: sticky; background: #eee; } thead { top: 0; z-index: 2; } tr>th { left: 0; z-index: 1; } thead tr>th:first-child { z-index: 3; } th, td { height: 50px; border: 1px solid #ccc; border-width: 0 0 1px 1px; text-align: left; padding: 10px; font-family: sans-serif; } td { background: #fff; } th:first-child { border-right-width: 1px; border-left: 0; } th+td, th:first-child+th { border-left: 0; } tbody tr:last-child>* { border-bottom: 0; } tr>*:last-child { border-right: 0; }
<div class="wrapper"> <table> <thead> <tr> <th></th> <th><div style="width: 300px">column 1</div></th> <th>column 2</th> <th>column 3</th> <th>column 4</th> <th>column 5</th> </tr> </thead> <tbody> <tr> <th>row 1</th> <td>scroll</td> <td>scroll<br>scroll 2 rows</td> <td>scroll</td> <td>scroll</td> <td>scroll</td> </tr> <tr> <th>row 2</th> <td>scroll</td> <td>scroll</td> <td>scroll wide wide wide wide</td> <td>scroll</td> <td>scroll</td> </tr> <tr> <th>row 3</th> <td>scroll</td> <td>scroll</td> <td>scroll</td> <td>scroll</td> <td>scroll</td> </tr> <tr> <th>row 4</th> <td>scroll</td> <td>scroll</td> <td>scroll</td> <td>scroll</td> <td>scroll</td> </tr> <tr> <th>row 5</th> <td>scroll</td> <td>scroll</td> <td>scroll</td> <td>scroll</td> <td>scroll</td> </tr> <tr> <th>row 6</th> <td>scroll</td> <td>scroll</td> <td>scroll</td> <td>scroll</td> <td>scroll</td> </tr> </tbody> </table> </div>