Responsive table using CSS display: table-row

Question

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:

Desktop

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

Phone

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 th and td are displayed vertically above/under each other, and not next to each other like I intended to do. I tried using float: left and 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)?

Answer 1

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

http://jsfiddle.net/uzsw7s4o/

CSS

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

Answer 2

How about adjusting the table definitions for the different screen widths. This also prevents any unanticipated side effects of floating your elements.

Resizable Fiddle

.table {
  display: table;
  width: 100%;
}
.row {
  display: table-row;
}
.cell {
  display: table-cell;
}
@media screen and (max-width: 750px) {
  .cell {
    display: block;
  }
  .row {
    display: table-cell;
    width: 50%;
  }
}

<div class="table">
  <div class="row">
    <div class="cell">Head #1</div>
    <div class="cell">Head #2</div>
    <div class="cell">Head #3</div>
    <div class="cell">Head #4</div>
  </div>
  <div class="row">
    <div class="cell">Content #1</div>
    <div class="cell">Content #2</div>
    <div class="cell">Content #3</div>
    <div class="cell">Content #4</div>
  </div>
</div>

Answer 3

I have forked you fiddle. That is the way I would solve it:

HTML

<div class="row">
    <span>Head #1</span>
    <span>Head #2</span>
    <span>Head #3</span>
    <span>Head #4</span>
</div>
<div class="row">
    <span>Content #1</span>
    <span>Content #2</span>
    <span>Content #3</span>
    <span>Content #4</span>
</div>

CSS

.row
{
    display: table-row;
}
.row > *
{
    display: table-cell;
}

@media screen and (max-width: 750px) {
    .row
    {
        display: block;
        float: left;
    }
    .row > *
    {
        display: block;
    }
}