强制表格单元格到新行答案

【问题标题】：Forcing table cell onto new row强制表格单元格到新行
【发布时间】：2016-11-12 22:45:29
【问题描述】：

我有一个标准表格，其中单元格从左到右出现在同一行，但我想强制第三个单元格出现在新行上。有没有可以做到这一点的 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

【问题讨论】：

请向我们展示您的 CSS
有什么理由不能让它成为一个新行吗？
stackoverflow.com/questions/33202614/…
我无法创建新行，因为 HTML 用于响应式页面，因此它必须在媒体查询开始之前工作。

标签： html css html-table

【解决方案1】：

不完全确定你为什么不把它改成新行，但我想如果你不得不使用 CSS，你可以这样做：

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

JSFiddle

【讨论】：

【解决方案2】：

您可以创建一个新行，如下所示用tr 环绕您的td

<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>

希望这会有所帮助！

【讨论】：

不幸的是我的 HTML 是固定的