Skip to main content
CSS is fun and cool and I like it.
Link

Making Tables Responsive With Minimal CSS

Link

Table with Expando Rows

Article

Position Sticky and Table Headers

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

Link

Table design patterns on the web

Article

An Idea for a Simple Responsive Spreadsheet

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

Link

Designing Tables to be Read, Not Looked At

Article

The Media Object, A Bunch of Ways

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

Article

A Table With Borders Only On The Inside

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

icon-link icon-logo-star icon-search icon-star