• Making Tables With Sticky headers and Footers Got a Bit Easier
  • Originally by Chris Coyier
  • The Nuggets translation Project
  • Permanent link to this article: github.com/xitu/gold-m…
  • Translator: Hoarfroster
  • Reviewer:

Not long ago, I wrote about stickiness headers and footers in HTML

in a blog post with a table of stickiness headers and the first column of stickiness content. I didn’t use position: sticky on any

, or

elements at the time, because even though I could do it in Safari and Firefox, I couldn’t do it in Chrome. However, it can be applied to table cells like

and < TD >, which is a good solution.

Well, that has changed.

Sounds like the Chromium rendering engine has completely reworked the rendering of tables to keep them up to speed. It’s a huge effort, not just to stick one line of text on top or bottom, but all the rest of it. But I only focused on the stickiness Header and Footer, because that’s what I focused on.

My titles and are sticky, and this seems to be the most common use case here:

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

Codepen chriscoyier/WNpJewq

This applies to all three major browsers. You might want to be a bit more resourceful, hoping to stick these elements only at a certain minimum viewport height or elsewhere, but the point is that it works.

I also heard several questions about the columns of the table. I have a sticky first column in my post (that’s the point). Although there is a table tag, it… It’s strange. It doesn’t actually wrap the column, it’s more like a pointer that you can style the column as needed. I hardly ever see it in use, but it’s there. In any case, you should never apply position:sticky; On a but you can make sticky columns. You just need to select all the cells in that column and paste them to the left or right. This is using logical attributes…

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

Here’s an interesting table where , , the first column and the last column are sticky.

Codepen chriscoyier/OJpweqJ

I’m sure you could do something tasteful with this. Like maybe:

If you find any mistakes in your translation or other areas that need to be improved, you are welcome to the Nuggets Translation Program to revise and PR your translation, and you can also get the corresponding reward points. The permanent link to this article at the beginning of this article is the MarkDown link to this article on GitHub.

The Nuggets Translation Project is a community that translates quality Internet technical articles from English sharing articles on nuggets. The content covers Android, iOS, front-end, back-end, blockchain, products, design, artificial intelligence and other fields. If you want to see more high-quality translation, please continue to pay attention to the Translation plan of Digging Gold, the official Weibo, Zhihu column.