用4个td制作1个tr，动作如下：2个tr各有1个td，1个tr各有2个td，仅使用CSS

使用此HTML：

<table>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
</table>

但我想要的是：

 1
2 3
 4

我如何在不更改HTML的情况下实现这一点，而只使用CSS

如果我喜欢这个：

td { display: table-row; }
td:nth-child(2), td:nth-child(3) { display: table-cell; }

它不起作用。但如果我去掉display:table单元格，我只需要做2个。三,。运输署转为1 tr

示例：

您可以在此处使用Flexbox，使第一个和最后一个单元格占据100%的宽度

tr{ 显示：内联flex； 柔性包装：包装； } 运输署{ 弹性：1； 文本对齐：居中； } td：第一个孩子， td：最后一个孩子{ 弹性：0.100%； } 1. 2. 3. 4.

---

不知何故，这在IE11中不起作用，在较新的iPhone上也不起作用，为什么？不确定，看看这里和这里的已知问题

td { display: table-row; }
td:nth-child(2), td:nth-child(3) { display: table-cell; }