Responsive table – four columns on two rows

[dwlamb]

I am trying to code a table for viewing on smaller devices. To clearly describe what I have and am trying achieve, I have the following jsfiddle.

Does anyone know of a method or tutorial for how to achieve the end result? Searches for “responsive tables” are not yielding the results I would like. Is it possible to give a row flexibility to stack columns?

[__]

Well, first off, it’s tabular data, so put it in a <table> — not divs.

To get what you want, you can use a media query to make the table rows display as inline-block when the viewport is above a certain size.

demo

[dwlamb]

I thought using div’s with display properties of tables would offer more flexibility than straight semantic mark-up for tables.

Is there a site to learn advance properties on tables? For instance, display: inline-block on <tr> is not found at w3shools

Thank you for your help. It is exactly the solution I was seeking.

[__]

@TheDoc or @Paulie_D, could you rescue a post here (there are two lost; it doesn’t matter which one survives).

[Author]

Posts