Search code examples
csshtml-tablemedia-queries

Breakable table row in HTML

Is there a way to make a table row breakable at a certain cell?

<table>
<tr>
<td>Some title descriptive text</td>
<td>nnumbers</td><td>Short text</td><td>datetime</td>
<tr>
... more rows
</table>

Now I would like this row to break after the first cell if the width of the viewport is too small (typically when used on mobile phones).

Is that achievable anyhow using html5 css3 and eventually some Javascript?

Solution

  • As of CSS2.1, it is possible by using appropriate display CSS attribute values. See this demo page:

    http://dabblet.com/result/gist/1576044

    ...and the source:

    http://dabblet.com/gist/1576044

    Tested on a Galaxy Nexus phone, works, and should work for most Webkit-based mobile browsers. Also, it should work on Firefox Mobile and Opera, though I didn't test.

    Long story short, use a media query to detect page width and set a max-width breakpoint and apply:

    css table, tbody, thead, tr, td, th { display: block }