Now, this is how you design a web component. It’s a progressive enhancement.
Wrap your existing table element inside table-saw and it will behave responsively. If anything goes wrong with the JavaScript, the fallback is the regular table that’s already in your markup.
I just wish the installation didn’t assume that you’re using npm …it’s not really “zero dependency” if it depends on that.
Notes on the old internet, its design and frontend.
Hui Jing runs through a whole bunch of options for displaying responsive tables, some of them using just CSS, some of them using a smidgen of JavaScript. There are some really clever techniques in here.
These are beautiful!
Featured below is a chronology of various attempts through the last four centuries to visually organise and make sense of colour.
Following on from Richard’s article, here’s a deep dive into making HTML tables that are accessible and responsive.
An extract from Richard’s excellent book, this is a deep dive into styling tables for the web (featuring some CSS I had never even heard of).
Tables can be beautiful but they are not works of art. Instead of painting and decorating them, design tables for your reader.
(It also contains a splendid use of the term “crawl bar.”)
This uses generated content in CSS to make the aria-label attributes visible on small screens—clever!
Dave explains the thinking behind his responsive table pattern I linked to a while back. He’s at pains to point out that you should always make sure a pre-made pattern is right for you instead of just deploying it no-questions-asked:
Using prefabricated, road tested solutions from Apple’s Human Interface Guidelines, Google’s Material Design, Twitter’s Bootstrap, and Brad Frost’s Responsive Patterns is always a good place to start, but don’t settle there. My biggest advice would be to turn off the 27” display and use your sites and projects on your phone, there’s lots of low hanging fruit that could give way to new patterns, tailor-suited to your content.
Here’s a nice little pattern from Dave—showing data tables one column at a time on smaller screens.
Those lovely people at Filament Group share some of their techniques for making data tables work across a range of screen sizes.
I like this CSS solution to sideways-scrolling tables for small viewports. It’s not going to be right for every situation but it’s a handy trick to keep up your sleeve.
This is handy—a month by month list of which vegetables you should be planting right now.
A nifty example of responsive tables. View source to see how it’s done.
An interesting approach to squishing down large data tables for small-screen viewing …though I wonder if there isn’t a “Mobile First” approach that could scale up, say, lists to become tables on large screens.
A really nice pattern for data tables in responsive designs. Just as with conditional loading, the key point is making a distinction between essential and optional content.
Some good ideas for formatting tabular data for small screens.
Rachel and Kevin's new book looks very interesting indeed. It is about just one thing: CSS tables.
Ben has written a superb article outlining the hows and whys of distributed social networks with hCard and XFN, finishing with an inspiring call to arms.
Liveblogged notes from a discussion I participated in at BarCamp Brighton 2 about Social Network Portability.
A nice summary of the technologies presented at my SXSW panel.