Cross-browser responsive collapsing table

Question

There seems a lot online about this but it's incredibly confusing so I'd like to try to get a definitive answer.

I have a table, say 2 columns and 2 rows.

1 | 2

3 | 4

I want it to collapse into rows when viewport requires it.

1

2

3

4

My code is as follows

<table border=0 cellpadding=0 cellspacing=0 width="100%" class="resptable">
    <tr>
        <td>Text 1</td>
    <td>Text 2</td>
    </tr>
    <tr>
        <td>Text 3</td>
    <td>Text 4</td>
    </tr>
</table>

And the css for the stacked version is as follows.

.resptable td {display:block;width:100% !important;padding-right:20px;}

This seems ok in FF and Chrome but not in Safari or IE.

Bizarrely (to me), identical code attached to a TH not a TD works in Safari (though still not in IE).

In a world where every site must be responsive, it beggars belief that there are still 1000s of cross-browser/device issues.

Anyone got the definite cross-browser method for this simple task?

Don't use a table. Tables take a lot of effort to be responsive. Try using a grid system, or Flex CSS. — Staveven, Mar 03 '17 at 18:00
Thank @Staveven - I'm sure that's a perfectly logical suggestion and I would happily tend to agree lol but one for the future as I'll need to check out Flex etc :) — RobertyBob, Mar 03 '17 at 18:06
I included a quick example using a simple CSS Flex command. I will go add another making the Table responsive. — Staveven, Mar 03 '17 at 18:12
Tables are for tabular data. What you are trying to do is layout, which is different. See [Why not use tables for layout in HTML?](http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html) — JDB, Mar 03 '17 at 18:20
Thanks for the link - interesting discussion @JDB - I'm firmly in the tables camp since I am able to construct a 100% working layout in tables in a fraction of the time it takes to work out nested or floating divs which makes my time management more efficient for everyone and only annoys purists. Sadly, modern browsing requirements make tabular layout almost impossible so have to use hundreds of divs instead which requires some seriously unintuitive code and takes a bit of getting used to. — RobertyBob, Mar 04 '17 at 11:58
When you need tabular layout, use [`display: table`](http://colintoh.com/blog/display-table-anti-hero). Works great without having to fight the browser over all the extra formatting. Once you know h how to use CSS properly, you'll find you can do layouts just as fast, even faster. — JDB, Mar 04 '17 at 12:55

Staveven · Answer 1 · 2017-03-03T18:17:48.623

The easiest way to do this is to give the TD element a width in pixels. I gave it a width of 500px. This will work with the Viewport as if the screen is big enough for whatever width you have, it won't collapse. If it's smaller it'll collapse into 1 per row. View this code in Full mode to see.

.resptable td {display:inline-block; width: 500px; !important;padding-right:20px;}

<table border=0 cellpadding=0 cellspacing=0 width="100%" class="resptable">
    <tr>
        <td>Text 1</td>
    <td>Text 2</td>
    </tr>
    <tr>
        <td>Text 3</td>
    <td>Text 4</td>
    </tr>
</table>

If you don't want to use a table, there are a lot of ways to achieve this. Using a table may not be your best option in this case. Instead I created a simple format that works like a table but it's responsive. *View in Full Mode and shrink the screen to see them collapse.

.parent-wrapper {
    height:100%;
    width:100%;
   
}
.parent {
    flex-wrap: flex;
    margin:-10px 0 0 -10px;
}
.child {
    display: inline-block;
    margin:10px 0 0 10px;
    flex-grow: 1;
    height:100px;
    width: 500px;
}

 <div class="parent-wrapper">
        
        <div class="parent">
            <div class="child">Text1</div>
            <div class="child">Text2</div>
            </div>           
        </div>    
        
        <div class="parent">
            <div class="child">Text3</div>
            <div class="child">Text4</div>
            </div>           
        </div>
                
    </div>

I've upvoted this as it does indeed provide a useful alternative to tables - will investigate further for use in future — RobertyBob, Mar 04 '17 at 11:43

score 0 · Answer 2 · answered Mar 04 '17 at 11:40

As suggested elsewhere, the Doctype declaration is key.

I thought the issue was with code that had NO doctype but it seems it is actually the type of declaration that is important.

It seems that it must be

<!DOCTYPE HTML>

And NOT something like

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

With this amended the original code seems to function correctly. Thanks to @Pangloss and @Staveven for the working code whose source led me to this conclusion

Cross-browser responsive collapsing table

2 Answers2