Here’s a fabulous CSS trick from Bradley Taunt in which he shows how to make tables work on mobile with just a little bit of extra code. He styles each table row into a card that looks something like this:
position: sticky; a
<thead></thead>. Nor a
<tr></tr>. But you can sticky a
<th></th>, which means you can make sticky headers inside a regular ol'
<table></table>. This is tricky stuff, because if you didn't know this weird quirk, it would be hard to blame you. It makes way more sense to sticky a parent element like the table header rather than each individiaul element in a row. … Read article
You know, like a tic-tac-toe board. I was just pondering how to do this the other day, as one does. There are three ways I can think of. One involves a good handful of rules and is the way I intuitively think of, one involves a deprecated attribute, and one is very simple and feels kinda like a CSS trick.… Read article