如何将 table 单元格强制到新行

Question

我有一个跨 5 列的 HTML table（由 MVC WebGrid 生成）。我想要的是前 4 列占据 100% 的宽度，第 5 列位于下方也占据 100% 的宽度。

  <tr>
    <td class="date">13/05/2015 13:40:55</td>
    <td class="firstname">Bob</td>
    <td class="lastname">Reed</td>
    <td class="errors"></td>
    <td class="profile">This is a lot of content that could potentially screw up the table layout if it were to be sat on the same row as the other 4 columns</td>
  </tr>

附带 CSS，但与 table 布局没有任何关系。

我不得不承认我被难住了。我试过搜索，但我似乎发现的都是关于在 div 上使用 display:table / table-row / table-cell CSS 属性] 或列表元素。

我尝试做的事情是仅使用 CSS 来修改当前的 HTML，还是可能需要完全重写 HTML 结构（因此可能会放弃 WebGrid）以使其显示我想要的方式？

Answer 1

您可以尝试重置 table 元素的显示属性并使用 flex 模型：

table,
tbody {
  display:inline-block;/* whatever, just  reset table layout display to go further */
}
td {
  border:solid 1px;
}
tr {
  display:flex;
  flex-wrap:wrap; /* allow to wrap on multiple rows */
}
td {
  display:block;
  flex:1 /* to evenly distributs flex elements */
}
.date, .profile {
  width:100%; /* fill entire width,row */
  flex:auto; /* reset the flex properti to allow width take over */
}

<table>
  <tr>
    <td class="date">13/05/2015 13:40:55</td>
    <td class="firstname">Bob</td>
    <td class="lastname">Reed</td>
    <td class="errors"></td>
    <td class="profile">This is a lot of content that could potentially screw up the table layout if it were to be sat on the same row as the other 4 columns</td>
  </tr>
</table>

不太确定每个浏览器是否会以相同的方式接受它。 codepen 玩：http://codepen.io/anon/pen/WvwpQq

堆叠tds，然后display:block：

td {
  border:1px solid;
  display:block;
  }

    <table>
      <tr>
        <td class="date">13/05/2015 13:40:55</td>
        <td class="firstname">Bob</td>
        <td class="lastname">Reed</td>
        <td class="errors"></td>
        <td class="profile">This is a lot of content that could potentially screw up the table layout if it were to be sat on the same row as the other 4 columns</td>
      </tr>
    </table>

Answer 2

可以使用 display: contents 并将其保留为 table 如果您将自己限制为一个子节点（如文本节点或元素，但实际上在 CSS 框中术语）在第 5 个单元格中（如果将 before 更改为 after 也可能是第 4 个）。

.profile {
    display: contents;
.profile::before {
    content: "";
    display: table-row;
}

如何将 table 单元格强制到新行

How can I force a table cell onto a new row

html

css

webgrid

tablelayout