如何在同一 tr 内的新行上获取每个 th 和后续 td 对？

Question

我有以下 HTML 结构（不幸的是我无法更改）：

<table>
    <tbody>
        <tr>
            <th>Name:</th>
            <td>foo</td>
            <th>Address:</th>
            <td>bar</td>
        </tr>
        <tr>
            <th>Name:</th>
            <td>foobaz</td>
            <th>Address:</th>
            <td>barbaz</td>
        </tr>
    </tbody>
</table>

请注意，th/td对的数量可能会有所不同，但在一张表内它们是稳定的。

我正在尝试使用 CSS 在每一行上获得一对 a<th>和 a<td>以便上面的 HTML 呈现为：

<table>
    <tbody>
        <tr>
            <th>Name:</th>
            <td>foo</td>
            <th>Address:</th>
            <td>bar</td>
        </tr>
        <tr>
            <th>Name:</th>
            <td>foobaz</td>
            <th>Address:</th>
            <td>barbaz</td>
        </tr>
    </tbody>
</table>

我尝试了以下CSS让<th>到float:left。

Name:    foo
Address: bar

Name:    foobaz
Address: barbaz

以及类似的努力td：

th {
    color:red;
    float:left;
    position:relative;
    display:block;
}

但我认为某些 über-CSS-table-cell-rule 比我尝试应用的规则更强。

我需要应用哪些 CSS 规则来实现所需的渲染？

我在 webkit-engine 的上下文中使用它，所以我对WebKit -only CSS-rules 开放。

你可以在这里找到一个 JSFiddle。

Answer 1

您可以将表格更改为不再呈现为表格，而是呈现为常规块元素。通过一些浮动和清除，可以实现与您想要的类似的结果。添加伪选择器来设置边距，你就在那里。

该th:first-child + td行是nth-child在 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;
}

小提琴：http : //jsfiddle.net/m2sr7/7/