When a table is long enough to require scrolling, the header row
disappears as you scroll down and you lose the context for what
each column contains. This is the problem that frozen header rows
solve. The header stays visible while the data rows scroll beneath it.
In HTML, this is achieved with position: sticky on the header row.
The implementation sounds simple but gets complicated in tables with
merged cells, varying column widths, and custom borders. The sticky
position needs to account for the correct top offset, the z-index
needs to be right to prevent data rows from showing through, and
the border rendering needs to stay consistent at the boundary.
In Tablesmit, the freeze header option is in the toolbar. Click it
and the header row sticks to the top of the visible table area as
you scroll through long data. The column borders stay sharp at the
boundary and merged header cells stay correctly positioned.
You can also freeze the first column using the same toolbar. This
is useful for tables where the first column is a label (a method name, a date, or a category) and you want to keep it visible while
scrolling right through metric columns.
Both can be active simultaneously: frozen header row and frozen
first column together.
Free, no account, MIT licensed. tablesmit.com
This post originally appeared on the Tablesmit Blog at tablesmit.com/blog/how-to-freeze-header-row-in-table. Tablesmit is a free, open source table builder. Export to PDF, Excel, LaTeX, CSV, PNG. No account required. Try it at tablesmit.com.
Top comments (0)