I’m a big fan of responsive design. It’s the idea that a website should adapt to the size of your screen, instead of always being a fixed width. You can see it here on my own site: go ahead and resize your window if you’re on a desktop browser, or rotate it between portrait and landscape if you’re on a touch device.
Responsive design is the natural progression for websites, given the vast number of devices that can now access the web. But there’s a problem: tables are not responsive.
Years ago, it used to be that tables were used for everything. They’re not so much anymore, but it still makes sense to use them for displaying tabular data. It’s what they’re meant for, after all. Unfortunately, that means a table on an otherwise responsive page will make you scroll horizontally or zoom in. Not great.
So I’ve been playing around, for a over half a year now, with the idea of making tables responsive. It started with Bootstrap’s (rather poor) implementation of a responsive table:
On a small enough screen, it just makes you scroll horizontally. It eliminates the need to zoom in, but it’s still not the best solution.
It seemed to me that using CSS, a developer should be able to imitate the markup of a table, and so doing, be able to make said markup responsive by way of media queries:
This wasn’t ideal, though. It resulted in a great deal of extra styles, just to imitate what the browser can do with its default styles on a large enough screen.
What I’ve done in my latest demo is take existing table markup, and override those styles only for small screens.
There are a couple caveats, though. It’s hard to tell size screen should be your breakpoint — at what width you convert the table cells to block-level elements. That’s really going to be a case-by-case determination. Also, the labels need to be defined on a per-cell basis in order to show up on small screens. This could be done by JavaScript, but I’ve done it here by setting a data-label attribute on the corresponding cell.
That last demo, by the way, is using the latest version (at this time of writing) of Google’s Material Design Lite. I’m considering submitting the responsive table styles in a pull request, but I don’t know if it’s suitable for the core framework.
Leave a Reply