强制表格单元格换行

Question

我有一个标准表格，其中单元格按照同一行从左到右显示，但是我想强制第三个单元格出现在新的一行。是否有CSS调整可以实现这一点？

<table><tr>
<td class="col-1">One</td>
<td class="col-2">Two</td>
<td class="col-3">Three</td>
<td class="col-4">Four</td>
</tr></table>

这将显示为：One Two Three Four

我可以强制第三列显示在新行上，像这样：

One Two
Three Four

- iantresman

---

请展示你的CSS。 - P.S.

你为什么不能只是新建一行呢？ - Tyler Roper

http://stackoverflow.com/questions/33202614/how-to-easily-add-remove-cells-from-a-table-shifting-existent-cells - user5306470

我无法创建新行，因为HTML是响应式页面，所以必须在媒体查询生效之前就能正常工作。 - iantresman

Answer 1

我不太确定为什么你不直接新建一行，但是如果你必须使用CSS，你可以这样做：

table tr td {
  display: block;
  width: 50%;
  box-sizing: border-box;
  float: left;
}

JSFiddle

- Tyler Roper

Answer 2

您可以通过将 td 用 tr 包裹来创建新行，如下所示

<table>
  <tr>
    <td class="col-1">One</td>
    <td class="col-2">Two</td>
  </tr>
  <tr>
    <td class="col-3">Three</td>
    <td class="col-4">Four</td>
  </tr>
</table>

希望这能帮到你！

- Rohin Gopalakrishnan

---

很遗憾，我的HTML是固定的。 - iantresman