It takes as much energy to wish as it does to plan. — Eleanor Roosevelt
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:
See the Pen
Responsive Tables #2.5: Flexbox by Bradley Taunt (@bradleytaunt)
on CodePen.… Read article
"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 what the accessibility concerns of a design/interactivity feature are. I'm not entirely sure how I would have approached this problem myself, but there is a good chance that whatever I would have tried wouldn't have hit the bullseye with accessibility. … Read article
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 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
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:
… Read articleThere are a myriad of table design patterns out there, and which approach you pick depends heavily on the type of data you have and the target audience for that data. At the end of the day, tables are a method for the organisation and presentation of data. It is
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 the simplest spreadsheet possible. I wanted to avoid using a framework and instead, I decided to experiment with some new properties in order to use nothing but a light touch of CSS.… Read article
Richard Rutter, in support of his new book Web Typography, shares loads of great advice on data table design. Here's a good one:
… Read articleYou might consider making all the columns an even width. This too does nothing for the readability of the contents. Some table cells will be too wide, leaving the data lost and detached from its neighbours. Other table cells will be too narrow, cramping the data uncomfortably. Table columns should be sized according to the data
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 be done many ways.… 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
The table-layout property defines what algorithm the browser should use to lay out table rows, cells, and columns. … Read article
The caption-side property in CSS allows you to define where to position HTML's <caption></caption> element, used on HTML tables. This property can also apply to any element whose display property is set to caption-side.… Read article