We’ve covered that individual <table> cells, <th> and <td> can be position: sticky. It’s pretty easy to make the header of a table stick to the top of the screen while scrolling through a bunch or rows (like this …
Twenty-plus years ago, tables were the main way web pages were created in HTML. It gave web builders consistent control of constructing pages with some “design.” No longer did sites only have to be top-to-bottom in a linear manner — …
Rotated <table> column headers is something that’s been covered before right here on CSS-Tricks, so shout-out to that for getting me started and helping me achieve this effect. As the article points out, if you aren’t using trigonometry to calculate …
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:…
“Expando Rows” is a concept where multiple related rows in a <table></table> are collapsed until you open them. You’d call that “progressive disclosure” in interaction design parlance.
After all these years on CSS-Tricks, I have a little better eye for …
You can’t 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 …
Chen Hui Jing has tackled a ton of design patterns for tables that might come in handy when creating tables that are easy to read and responsive for the web:
…There are a myriad of table design patterns out there,
How do you make a spreadsheet-like interface responsive without the use of any JavaScript? This is the question I’ve been asking myself all week as I’ve been working on a new project and trying to figure out how to make …
Richard Rutter, in support of his new book Web Typography, shares loads of great advice on data table design. Here’s a good one:
…You might consider making all the columns an even width. This too does nothing for the
The Media Object pattern is: image thingy on the left, heading and text on the right.
That’s what Nicole Sullivan called it and the name stuck. It’s a pretty simple pattern, but like all things web design, it can …
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 …
