使用4 td的行为制作1 tr：2 tr，每次1 td，1 tr，2 td，只有CSS

Question

使用此HTML：

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

我得到了这个输出：

1 2 3 4

但我想要的是：

 1
2 3
 4

如何在不更改HTML的情况下实现这一目标，仅使用CSS？

如果我喜欢这样：

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

它不起作用。但是，如果我删除“display：table-cell”，我只需要将2.和3. td变为1 tr

示例：https://jsfiddle.net/1h3eyLqk/

Answer 1

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

tr {
  display: inline-flex;
  flex-wrap: wrap;
}
td {
  flex: 1;
  text-align: center;
}
td:first-child,
td:last-child {
  flex: 0 0 100%;
}

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