Responsive HTML Tables
Sep 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.
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.
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.
|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.