Make HTML tables responsive with CSS3 and Flexbox

Quick CSS3 fix to make legacy web pages with HTML tables responsive

If you have an older, non-responsive website, that site may utilize many tables. This can make it hard to upgrade this site to a responsive site just by adding a new responsive theme or style sheet and not rebuilding pages. However, there is a quick fix for this.

Add the Flexbox property to the “tr” tag

Using CSS3 flexbox, we can set “tr” and “td” CSS3 rules so that the browser will interpret “tr” tags as flexboxes instead of interpreting them as table rows. Here is an example:

Box 1
Box 2
Box 3

Vary the size of the window to view how the box layout changes.

The code

Box 1
Box 2
Box 3

 

How it works

The trick is to define “tr” as a flex container using:


tr { display:flex; flex-flow:row wrap;}

The “td” tags are then flex items and we set a property on them as:


td {flex:1;}

You can vary the size of the flex items and apply all the other flexbox properties to get just the layout that you want. IOS does not work properly unless you add a minimum width to the “td” element.

Posted in CSS

Leave a Reply

Your email address will not be published. Required fields are marked *