Stack Table Cells

When displaying values in a table, it is challenging to see more than a few columns at a time, requiring horizontal scrolling. Instead of displaying table data as a table, stack neighboring cells on top of each other instead.

For example:

However, this can be pretty easily resolved by stacking information:

In practice:

You can accomplish this with some css. Given this table:

<table class="example">
  <tr>
    <td>1,1</td>
    <td>1,2</td>
  </tr>
  <tr>
    <td>2,1</td>
    <td>2,2</td>
  </tr>
</table>

Which would normally look like this:

1,1	1,2
2,1	2,2

You can transform it to be stacked, with the following css:

table.example-stacked {
  width: 100%;
}

table.example-stacked tr {
  display: inline-block;
  width: 100%;
  clear: left;

  /* visual changes only */
  border: 1px solid #ddd;
  margin-bottom: 10px;
}

table.example-stacked tr td {
  width:100%;
  float: left;

  /* visual changes only */
  padding: 10px;
}

Leaving us with this table:

1,1	1,2
2,1	2,2