Kevin Voorn Kevin Voorn - 2 months ago 6x
CSS Question

Responsive table using CSS display: table-row

I'm having trouble converting my table to a more responsive design, I've tried many resources on Google but they are all limited and do not work like intended. The underlying problem I'm having is that my tables are dynamically generated and I do not want to edit resources I find on Google so I can update them easily and don't mess with the code too much.

Anyway, my table has a really simple design. There are 5 columns with X rows (depending on what's being generated from the database). Whenever an user resizes their browser (or when they are using a mobile phone) I want to change my table so it is fitting on smaller screens as well. An example of this would be:


Header 1 | Header 2 | Header 3
Content | Content | Content


Header 1 | Content
Header 2 | Content
Header 3 | Content

I'm trying to accomplish this by using
display: table-row
using CSS whenever the screen hits a certain width, I created this jsfiddle to display my current code. However currently the
are displayed vertically above/under each other, and not next to each other like I intended to do. I tried using
float: left
float: right
but that does not work (see the jsfiddle). Can anybody help me accomplish what I want using CSS? And if that is not possible, how would I go over using Javascript for this, keeping in mind that my tables will not all be generated when the page is loaded (some are dynamically added to the page)?


Using thead and tbody elements, you could try like so:


@media screen and (max-width: 750px) {
    tbody, thead { float: left; }
    thead { min-width: 120px }
    td,th { display: block }