It wasn’t long ago when I looked at sticky titles and footers in HTML format <table>s blog post A table with both a sticky title and a sticky first column. I never used that position: sticky by any means <thead>, <tfoot>or <tr> because Safari and Firefox were able to do it, Chrome couldn’t. But it could make table cells like <th> and <td>, which was a decent enough workaround.

Well, that’s changed.

It seems that the complete overhaul of the tables in Chromium’s rendering engines was aimed at speeding up the tables. It not only corrected the stickiness, but all kinds of things. I’m just focusing on the sticky thing because I looked at it.

The title for me is that <thead> and <tfoot> are sticky. It seems to be the most common use here.

table thead,
table tfoot {
  position: sticky;
}
table thead {
  inset-block-start: 0; /* "top" */
}
table tfoot {
  inset-block-end: 0; /* "bottom" */
}

It works in all three major browsers. You may want to get smart and sticky at just a certain minimum view height or something, but the thing is, it works.

I heard several questions on the table columns as well. My original article had a sticky first column (that was the kind of thing). Although there is a table <col> tag, it’s … weird. It doesn’t actually wrap columns, it’s more than a pointer thing, so you can style according to the column when needed. I can hardly ever see it used, but it’s there. Anyway, you are completely can not position: sticky; a <col>, but you butter make sticky columns. You must select all the cells in that column and pin them to the left or right. Here is that using logical properties …

table tr th:first-child {
  position: sticky;
  inset-inline-start: 0; /* "left" */
}

Here is a sorta disgusting table with <thead>, <tfoot>, and the first and last columns are all sticky.

I’m sure you could do something stylish with this. As you might:

LEAVE A REPLY

Please enter your comment!
Please enter your name here