Wrap two adjacent td's

Question

I have a table with two columns, both 300px wide, taking 600px in width on a regular computer screen.

I want to modify the display of that table for small screen mobile devices.

Is there a CSS way to make the cell of the right column to wrap and go below the cell of the left column, followed by the next left cell, followed by the next right cell, and so on?

Answer 1

Here is a proof-of-concept demonstration.

Consider the following table:

<table>
    <tr>
        <td>First Row - Cell 1</td>
        <td>First Row - Cell 2</td>
    </tr>
    <tr>
        <td>Second Row - Cell 1</td>
        <td>Second Row - Cell 2</td>
    </tr>
</table>

If you float the table cells, you can get them to stack vertically, for example:

table {
    width: auto;
}
table td {
    background-color: lightgray;
    float: left;
    width: 150px;
    margin: 10px 0;
}

You need to adjust the table width and the cell width in your media query.

The one advantage of using floats is that the table is responsive without using media queries, which may be useful in some instances.

Fiddle: http://jsfiddle.net/audetwebdesign/qSd7g/

Answer 2

A table is just like any other HTML element. If you don't like the way it is displaying, you change its display property.

table, tbody, tr, th, td { display: block }
thead { display: none } /* optional */

Demo for reformatting a complex table: http://codepen.io/cimmanon/pen/ukBqo