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

Try adding this to you CSS:

td {
  display: table-row;
}

Cheers.


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.

Tags:

Html

Css

Html Table

Recent Posts