Force html table into single stacked column using only css and no javascript

Question

I'm creating a html template that wraps a table that is used to lay out a form. I have full control over the html that wraps the table not the table itself. The table is injected into my template before it's sent to the client. I have no control over this whatsoever. The only thing I do have control over is the html that wraps the table and any CSS.

The table is a two column table that looks like this:

<table>
  <tr>
    <td>Column 1</td>
    <td>Column 2</td>
  </tr>
  <tr>
    <td>this is column 1</td>
    <td>this is column 2</td>
  </tr>
</table>

-------------------------------------------------
|Column 1                   |Column 2           |
-------------------------------------------------
|this is column 1           |this is  column 2  |
-------------------------------------------------

However I would prefer if we could show it as one stacked column.

----------------------------
|Column 1                   |
-----------------------------
|this is column 1           |
-----------------------------
|Column 2                   |
-----------------------------
| this is column 2          |
-----------------------------

Is there a way to achieve this using only CSS, no Javascript?

Answer 1

I was confronted with a similar problem recently & seem to have found a good solution. Tables have a bad rap due to frequent mis-use, but are indeed the leanest option when needing to display a grid of data in a variable width viewport.

The answer to the original question is still no. In order to solve this problem without JavaScript, one must be able to edit the table markup.

Tables can look... okay... when stretched wide, but look just terrible when squished. "Responsive" tables are possible only by adding contextual markup to each cell (e.g. span.label & span.data elements). We can easily hide this new superfluous output by default & only show it when in a responsive view state.

table.responsive td .label {
  display: none;
}

<table class="responsive">
    <thead>
        <tr>
            <th>Column Foo</th>
            <th>Column Bar</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><span class="label">Column Foo</span><span class="data">Baz</span></td>
            <td><span class="label">Column Bar</span><span class="data">Qux</span></td>
        </tr>
    </tbody>
</table>

When in a responsive view state, hide the thead element & show the .label elements.

table.responsive {
  width: 100%;
}
table.responsive td .label {
  display: none;
}

table.responsive th {
  background-color: #ddd;
}

table.second {
  margin-top: 5em;
}

@media screen and (max-width:640px) {
  table.responsive thead {
    display: none;
  }
  table.responsive tbody th,
  table.responsive tbody td {
    display: block;
  }

  table.responsive td span {
    display: block;
  }
  table.responsive td .label {
    background-color: #ddd;
    font-weight: bold;
    text-align: center;
  }
}

I've created a repo which covers the solution in greater detail. Click here to see it work.

Answer 2

Try adding this to you CSS:

td {
  display: table-row;
}

Cheers.