Really Responsive Tables using CSS3 Flexbox

For a long time, I've been looking for a really responsive way to handle tables in a browser. Some technique that lets tables smoothly adapt to many screen sizes, not just desktop vs. mobile. Having found none, I created my own using <div>s and CSS3 Flexbox, and here it is.

Why tables

  1. Tables are a very nice way to show a list of very similar items. People just get it, when it's a table.
  2. The alignment of fields in columns is very helpful in getting a feel for the values, how they differ or are similar across rows.
  3. Using cards like this list of JIRA issues is an option, still, it doesn't feel as good as a table when the number of rows / columns is large such as this bugzilla bug list.

Problems with conventional tables

  1. If they are fixed width, they don't let the user take advantage of a larger screen size.
  2. If they are not fixed width, cells can wrap on smaller screens. But only cells with long content wrap, and you can get uneven sized rows. This is an eyesore.
  3. If you set overflow: hidden and add ellipsis to restrict all rows to one line, on very small screens, you end up seeing almost nothing.

There are many solutions proposed for responsive tables at this post: 10+ Solutions for Responsive Data Tables. But I'm not happy. They're all binary solutions (i.e., Desktop vs. Mobile -- all or none). There are no solutions that address what I really want, something smoothly adapting to varying screen widths -- really responsive.

What I want: really responsive tables

  1. Maximisation of real-estate is important. Minimum white space.
  2. Wrapping cells is not OK. Wrapping a row is ok, as long as all rows are laid out the same way.
  3. No horizontal scrollbar, ever.
  4. Fields should be aligned, otherwise, it's not a table.
  5. Optimum layout for any screen size, that is, really responsive!

Flexbox to the rescue

I got enamored by CSS Flexbox, since it was faintly reminiscent of GridBagLayout (no, don't go there). This was my first exposure to fluid layouts, circa 1996.

If you are not familiar with Flexbox, please read A Visual Guide to CSS3 Flexbox Properties or this answer by @fazlerocks . It's is a pre-requisite to follow the rest of this story.

OK, now that you're familiar with Flexbox, we can discuss a few approaches to achieve really responsive tables using Flexbox <div>s instead of HTML <table>s. Let's start with a table which looks like this on large screens:

title here

Plain Wrap

This is a simplistic approach using flex: wrap. When there isn't enough horizontal space, a row wraps naturally. The right most columns go to the next line, one after the other.

Plain Wrap - Small

The CodePen for this approach is at Responsive Tables using Flexbox (Plain Wrap). Do play with it, check out its behaviour at various screen sizes.

Nested Wrap

Although the Plain Wrap approach is very simple to implement, the columns visually interfere with one another vertically. To address this, we nest multiple divs so that related cells stay together. The border colors show the nesting below.

Nested

CodePen: Responsive Tables using Flexbox (Nested Wrap).

Controlled Wrap

We still don't have control on which cells wrap when. Some times they look good, some other times, fields still interfere. I'd have really liked to see First Name and Last Name vertically stacked when displaying a row as two lines. This is because flex: wrap has its own mind and decides when to wrap what.

To have exact control we need to switch to flex-direction: column on the wrappers, whenever we want. To achieve this, we need media queries that change the flex-direction as the screen size shrinks.

Controlled

For the same screen width as the previous example, this looks much better. Note that now we even have the numeric columns right-aligned, and they look good too!

CodePen: Really Responsive Tables using Flexbox (controlled wrap).

Advanced Example

Controlled Wrap gives us what we want, but we made some big assumptions about uniformity of field widths. Life is usually not this simple. In reality, we encounter different field widths, some with fixed width, some variable. We have to deal with each column individually and lay it out to perfection, maybe like this:

Single line: Advanced Large screen

3-line rows: title here

5-line rows: Advanced Mobile View

Really responsive, finally.

Here's the CodePen: Really Responsive Tables using CSS Flexbox (complex).

To implement something on your own like this, it's a bit of a work, especially to decide how the columns are laid out at different screen sizes. But, believe me, it's worth it.

Vasan Subramanian's photo

Vasan Subramanian

Write your comment…

30 comments

The problem is that you don't have a table any more. Semantic table markup is important, when you have tabular data, as it describes the meaning of that content. Now you just have a string of meaningless data wrapped in div elements.

I like the idea though and responsive tables as something of an unsolved problem, I wonder if it would be possible to do something similar with semantic markup. It might require display: contents (which is currently only supported in Firefox).

Show all replies

The best way to overcome this is to use aria accessible features here. This will provide accessibility options for screen readers or voice-over programs.

Reply to this…

Share your programming knowledge and learn from the best developers on Hashnode

Get started

Great work! I'm wondering if it's possible, using this or something similar, to have the header row (rows if wrapped) stay pegged, so for large datasets you can scroll vertically and always have the headers visible.

Show all replies

I think this is a must because when there is no header in view the table info makes no sense especially when they are laid out like that in smaller screens. I need to see this working with dynamic table where columns can be added or taken out and order can change. Now that's what we need.

Reply to this…

How does the horizontal scrollbar fit into this flex table when the number of columns becomes very large? Also what about fixed columns and fixed rows and their scrolling?

Show all replies

About the fixed header rows when scrolling: please see @gregcatalano's comments. If the header row is below some other section, then things do get complicated, you'll have to trap the scroll event. How that's done will depend on whether you're using jQuery or Angular or something else. I managed to get it done in my Angular.js project: I had to bind to the window's scroll event, keep calculating the offset from top, when it reaches 0, add a class to the header to make it fixed. The code is not clean enough to share it here, apologies.

Reply to this…

Why not just apply flexbox CSS styles to <table> and <tr> elements themselves? --> codepen.io/csuwldcat/pen/JGabQV

Show all replies

I don't think that will be responsive.

Reply to this…

I really like this idea. I have started to use flexbox to make 2 column lists rather than the float method. Now I like the idea of this table, and I like the way it compresses, but is it possible to use this method on a scrolling table, where the header stays at the top and the data scrolls. I use this kind of table a lot and at the moment I sometimes use css divs or jQuery hacks to get around the problem.

Show all replies

Please check my comment below.

Reply to this…

Load more responses