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>。我想在不使用javascript的情况下完成此任务。

关于奥斯卡

Answer 1

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

<强> 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>浮动但不时地断开。您可以使用:nth-child - 选择器控制何时发生这种情况。在这种情况下（:nth-child(3n+1)），它会在每第三行之后中断。每隔一行使用2n+1个中断，最后n+1从头开始收回原始订单。我希望这会有所帮助。

<强>演示

Try before buy

^{注意：我在Safari，Chrome和Firefox中进行了测试，但未在IE中测试过 - 没有时间启动虚拟机。}

PS：如果您知道<tr>的宽度，可以使用tr { float: left; }并通过设置表格的总宽度，以便1,2或3行有足够的空间水平。

两个表行与CSS一起使用

1 个答案: