表格单元格显示为使用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的结构，只更改display属性。有没有让我能够实现的css？

Answer 1

您可以使用css：

display: none;

Answer 2

最初我建议不要更改td默认行为，我们对每个标签都有规范。并且您可以使用visibility:hidden;或display:none;到表格行

来实现该显示

<table border="1">
    <tr>
        <td>
            Apple
        </td>
   </tr>
    <tr>
        <td>
            Banana
        </td>
   </tr>
    <tr>
        <td>
            Candle
        </td>
   </tr>
    <tr>        
       <td>
            Digital drive
        </td>
    </tr>
</table>

Answer 3

试试这个：

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

JSFiddle link

它只会将前两列和最后两列放在一行。