[Solved] How can I get each th and following td pair on a new line within the same tr?

by


You can change the table to no longer render as a table but as a regular block element. With some floating and clearing, it’s possible to achieve a result similar to what you want. Add pseudo-selectors to set margins and you’re there.

The th:first-child + td line is a way to use nth-child in IE 8

table, tr, th, td
{
    display: block;
}

th
{
    color: red;
    clear: left;
    float: left;
}

td
{
    float: left;
    color: green;
}

th:first-child, th:first-child + td
{
    margin-top: 1em;
}

Fiddle: http://jsfiddle.net/m2sr7/7/

solved How can I get each th and following td pair on a new line within the same tr?