Responsive HTML Tables

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 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 t 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

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
and recreates them as labels, replicating down for each table row.

So for the table below, the web producer only needs properly formatted HTML with a

and a
. 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.

Ingredient Minimal Soaking PSI setting Cooking time Notes
Black Beans 4-8 hours 15 PSI 18-20 minutes

Black beans are popular in many Latin American dishes. They pair well with meat and other strong, assertive flavorings.

Cannellini 4 hours 15 PSI 10-12 minutes

These beans work very well with bean salads and soups. Can be served with fresh rosemary and black pepper.

Fava Beans 4 hours - overnight 10 PSI 6-8 minutes

Discard 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.

Garbanzo 8 hours - overnight 15 PSI 6-8 minutes Use in hummus or salads. Can also be baked until crispy
Lentils None 15 PSI 5-7 minutes

Great for soups. Always rinse and pick to remove stones and debris. French lentils tend to be more delicate.

Kidney Beans 4 hours 15 PSI 10-12 minutes

Should hold shape well during cooking. Use in chili and bean salads

Pinto Beans 4 hours 15 PSI 10-12 minutes Expect 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.