css - 使 1 tr 和 4 td 仅通过 CSS 表现得像 : 2 tr with 1 td in each and 1 tr with 2 td in,

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>