html - 表格单元格显示为使用 css 的单元格

Question

我有一个表格如下

<table border="1">
    <tr>
        <td style="display:table-row">
            Apple
        </td>
        <td style="display:table-row">
            Banana
        </td>
        <td style="display:table-row">
            Candle
        </td>
        <td style="display:table-row">
            Digital drive
        </td>
    </tr>
</table>

输出如下

我想更改输出以仅显示第一行的前两列，然后显示第二行的最后两列，而不更改表 html 的结构，但仅更改显示属性。是否有任何 CSS 可以让我实现此目的？

Answer 1

试试这个:

table td {
    border: none;
}
table td:nth-child(-n+1),td:nth-last-child(-n+2) {
    float: left;
}

JSFiddle link

它只会使前两列和最后两列在一行中。