Making Tables With Sticky Header and Footers Received a Bit Simpler

No Comments

It wasn’t way back once I checked out sticky headers and footers in HTML <desk>s within the weblog publish A desk with each a sticky header and a sticky first column. In it, I by no means used place: sticky on any <thead>, <tfoot>, or <tr> ingredient, as a result of although Safari and Firefox may try this, Chrome couldn’t. But it surely may do desk cells like <th> and <td>, which was a decent-enough workaround.

Nicely that’s modified.

I heard by means of the Twitter that Chrome “rewrote tables” in v91.

I noticed it dropped, upgraded, and did a fast take a look at. HEY LOOK STICKY TABLE HEADERS AND FOOTERS.@CodePen

(Works in Safari and Firefox too)

— Chris Coyier (@chriscoyier) June 4, 2021

Feels like a giant effort went into completely revamping tables within the rendering engine in Chromium, bringing tables up to the mark. It’s not simply the stickiness that was fastened, however all types of issues. I’ll simply deal with the sticky factor since that’s what I checked out.

The headline to me is that <thead> and <tfoot> are sticky-able. That looks like it will likely be the commonest use case right here.

desk thead,
desk tfoot {
place: sticky;
desk thead {
inset-block-start: 0; /* “high” */
desk tfoot {
inset-block-end: 0; /* “backside” */

CodePen Embed Fallback

That works in all three main browsers. You may need to get intelligent and solely sticky them at sure minimal viewport heights or one thing, however the level is it really works.

I heard a number of questions on desk columns as nicely. My unique article had a sticky first column (that was type of the purpose). Whereas there’s a desk <col> tag, it’s… bizarre. It doesn’t really wrap columns, it’s extra like a pointer factor to have the ability to fashion down the column if it is advisable. I rarely see it used, but it surely’s there. Anyway, you completely can’t place: sticky; a <col>, however you can make sticky columns. It’s essential to choose all of the cells in that column and stick them to the left or proper. Right here’s that utilizing logical properties…

desk tr th:first-child {
place: sticky;
inset-inline-start: 0; /* “left” */

Right here’s a sorta obnoxious desk the place the <thead>, <tfoot>, and the primary and final columns are all sticky.

CodePen Embed Fallback

I’m certain you can do one thing tasteful with this. Like perhaps:

A `sticky` desk row/column might be such a pleasant contact. Here is an instance from @destroytoday

— Chris Coyier (@chriscoyier) June 2, 2021

The publish Making Tables With Sticky Header and Footers Received a Bit Simpler appeared first on CSS-Methods.

You may help CSS-Methods by being an MVP Supporter.

    About Marketing Solution Australia

    We are a digital marketing company with a focus on helping our customers achieve great results across several key areas.

    Request a free quote

    We offer professional SEO services that help websites increase their organic search score drastically in order to compete for the highest rankings even when it comes to highly competitive keywords.

    Subscribe to our newsletter!

    More from our blog

    See all posts

    Leave a Comment