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.
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.
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…
At Marketing Solution Australia we strive to deliverer elegant responsive websites for your business integrated with our personal SEO Optimization package to bring your pages on the first page of Google.