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

 
    <style>
        table div {border:thin silver solid; min-height:50px; }
#sample tbody {border:none;}
       #sample  tr {display:flex; flex-flow:row wrap; border:none;}
       #sample td {flex:1;min-width:150px; border:none;}
       #sample td div {border: thin silver solid;}
    </style>

 <table id="sample">
        <tr>
            <td><div>Box 1</div></td>
            <td><div>Box 2</div></td>
            <td><div>Box 3</div></td>
        </tr>
    </table>

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.

1 2 3 9

Leave a Reply

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