Responsive HTML Tables

September 29, 2012

Data tables are notoriously pesky elements to wrestle down into a narrow viewport. They can have a large number of columns or rows. Cells may contain simple data or entire paragraphs. Let’s say for the sake of the article that it’s all appropriate, or if anything, that such a table could possibly show up on your website. How do we proceed? Well, that really depends.

There are plenty of solutions already in the wild. Some are good, some are not so good. Personally, I have an aversion to anything that would irretrievably remove content from view or forgo the table element altogether. These options either exhibit bad practices in responsive design or skirt the issue entirely.

What makes tables more difficult than other elements in a responsive site is that you need to maintain the relationship between the data and its respective column and row headers — visually and in code. This means that you end up sacrificing some of the flexibility that you have with other types of elements. In particularly tall tables, it’s pretty easy to lose track of the column headings.

Depending on what type of site you have, you, the designer, might not be the person responsible for producing content. And if a data table finds its way into an article, it’s likely that you didn’t have much say over how many columns or rows it contains. Hell, you’re probably not even aware it exists. But whether or not it breaks, that’s going to fall upon you.

Of all the proposed ideas for how to display a responsive data table, my favorite is Chris Coyier’s example on CSS Tricks. He has chosen to vertically orient the data into “card stacks.” What makes this so appealing to me is that it allows for great column flexibility and does not require the producer to manually enter class names for a javascript function. It’s also much less harrowing if that producer possesses only a working knowledge of HTML.

There was one aspect of Chris’s approach that I felt could be improved upon, however: using :nth-of-type selectors to create pseudo elements. Browser compatibility aside, having to replicate table headers into embedded CSS leaves a lot of room for human error. I’ve written a quick script which takes the headings inside the <thead> and recreates them as labels, replicating down for each table row.

[gist id=3804292]

So for the table below, the web producer only needs properly formatted HTML with a <thead> and a <tbody>. Even though mine is hooked with a class name (for my own purposes), it isn’t required. For CSS and all other information, please refer back to the original post on CSS Tricks.

IngredientMinimal SoakingPSI settingCooking timeNotes
Black Beans4-8 hours15 PSI18-20 minutesBlack beans are popular in many Latin American dishes. They pair well with meat and other strong, assertive flavorings.
Cannellini4 hours15 PSI10-12 minutesThese beans work very well with bean salads and soups. Can be served with fresh rosemary and black pepper.
Fava Beans4 hours - overnight10 PSI6-8 minutesDiscard skins after soaking. Use these in soups or paté. Blanch with cauliflower. Be careful about the loose skins while pressure cooking. Always use oil. Place rack on top of beans to keep them from floating up.
Garbanzo8 hours - overnight15 PSI6-8 minutesUse in hummus or salads. Can also be baked until crispy
LentilsNone15 PSI5-7 minutesGreat for soups. Always rinse and pick to remove stones and debris. French lentils tend to be more delicate.
Kidney Beans4 hours15 PSI10-12 minutesShould hold shape well during cooking. Use in chili and bean salads
Pinto Beans4 hours15 PSI10-12 minutesExpect them to be mushy when cooked. Used in mexican cuisine.

Keep in mind that tables tend to vary. This might be a bit much for a small table, but inadequate for a complex table with colspans or rowspans.