拆分表行分为两行

Question

有没有办法将表行拆分为两行而不是使用嵌套表？

这就是我想要的:

td #4应该有全宽,我不知道是否有任何CSS技巧或任何事情做到这一点.

注:我不想使用其他<tr>与colspan.我希望它在其他<td>s中的同一行内,因为我使用条带表,http://www.getuikit.com/docs/table.html.

Answer 1

在更新问题时,您可以采用的另一种方法是使用div具有display: table-cell;属性的嵌套元素

.top_row {
    display: table;
    width: 100%;
}

.top_row > div {
    display: table-cell;
    width: 50%;
    border-bottom: 1px solid #eee;
}

演示

注意:是的,可以float的div还有,我会更喜欢在这里,具有自清class,但我用display: table-cell;这样它会保留像的属性vertical-align: middle;,你可以为你使用的需要table

为什么不用colspan这个呢？

演示

<table border="1" width="100%">
    <tr>
        <td>Hello</td>
        <td>World</td>
    </tr>
    <tr>
        <td colspan="2">Merged</td>
    </tr>
</table>

注意:我在这里使用border和width属性仅用于演示目的,请考虑class使用CSS 声明并设置样式