Making Tables With Sticky Header and Footers Received a Bit Simpler

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.

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” */
}

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.

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

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.