Html 使用CSS将两个表行合并为一个表行

使用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 |
+-----------+-----------+-----------+-----------+

我想做的是在同一可视行上渲染两个（甚至三个）

s。 如果可能的话，我希望在不使用javascript的情况下实现这一点

---

关于奥斯卡，如果你不知道你的

有多宽，你可以使用这个：

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>

它让

浮动，但偶尔会中断。您可以使用

：n子项

-选择器控制何时发生这种情况。在这种情况下（

：第n个子项（3n+1）

），它每三行就中断一次。使用

2n+1

在每第二行之后中断，最后

n+1

从一开始就恢复原始顺序。我希望这有帮助

演示

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

PS：如果你知道你的

s有多宽，你只需使用

tr{float:left；}

并设置表的总宽度，使1、2或3行在水平方向上有足够的空间即可

tr {
    float: left;
}

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