html - 使用 CSS 将两个表格行合二为一

Question

是否可以使用 CSS 更改普通表格的外观，如下所示：

+-----------+-----------+
| Row1Cell1 | Row1Cell2 |
+-----------+-----------+
| Row2Cell1 | Row2Cell2 |
+-----------+-----------+
| Row3Cell1 | Row3Cell2 |
+-----------+-----------+
| Row4Cell1 | Row4Cell2 |
+-----------+-----------+
| Row5Cell1 | Row5Cell2 |
+-----------+-----------+
| Row6Cell1 | Row6Cell2 |
+-----------+-----------+

进入这个：

+-----------+-----------+-----------+-----------+
| Row1Cell1 | Row1Cell2 | Row2Cell1 | Row2Cell2 |
+-----------+-----------+-----------+-----------+
| Row3Cell1 | Row3Cell2 | Row4Cell1 | Row4Cell2 |
+-----------+-----------+-----------+-----------+
| Row5Cell1 | Row5Cell2 | Row6Cell1 | Row6Cell2 |
+-----------+-----------+-----------+-----------+

<tr>我想要做的是在同一个可视行上渲染两个（甚至三个） s。如果可能的话，我想在不使用 javascript 的情况下完成此操作。

问候奥斯卡

Answer 1

如果你不知道你<tr>的 s 有多宽，你可以使用这个：

HTML

<table>
    <tbody>
        <tr>
            <td>1 1</td>
            <td>1 2</td>
        </tr>
        <tr>
            <td>2 1</td>
            <td>2 2</td>
        </tr>
        <tr>
            <td>3 1</td>
            <td>3 2</td>
        </tr>
        <!-- more stuff here -->
    </tbody>
</table>

CSS

tr {
    float: left;
}

tr:nth-child(3n+1) {
    clear: left;
}

它让<tr>s 浮动但时不时地中断。您可以使用:nth-child-selector 控制何时发生这种情况。在这种情况下 ( :nth-child(3n+1)) 它每隔三行就中断一次。在每第二行之后使用2n+1休息，最后n+1从头开始恢复您的原始订单。我希望这有帮助。

演示

先试后买

^{注意：我在 Safari、Chrome 和 Firefox 中进行了测试，但没有在 IE 中进行测试——没有时间启动 VM。}

PS：如果你知道你<tr>的 s 有多宽，你可以tr { float: left; }通过设置表格的整体宽度来做到这一点，以便 1、2 或 3 行在水平方向上有足够的空间。