如何将表格单元格强制到新行上答案

【问题标题】：How can I force a table cell onto a new row如何将表格单元格强制到新行上
【发布时间】：2015-07-24 21:16:06
【问题描述】：

我有一个 5 列的 HTML 表（由 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，但它与表格布局没有任何关系。

我不得不承认我很困惑。我试过搜索，但我似乎发现的只是有关在 div 或列表元素上使用 display:table / table-row / table-cell CSS 属性的问题。

是我试图做的可能只使用 CSS 来修改当前的 HTML，还是可能需要完全重写 HTML 结构（因此可能会删除 WebGrid）来让它显示如何我要吗？

【问题讨论】：

我认为这是不可能的，如果不使用JS从tr中删除单元格并将其放入另一个tr下面。
我支持@evolutionxbox。不能直接编辑WebGrid的模板，把表格改成div吗？
我其实不知道，我对 WebGrids 没有太多经验。我试图避免这种情况，因为这基本上意味着重新做相关表格的整个结构，但我开始认为这可能是唯一的方法

标签： html css tablelayout webgrid

【解决方案1】：

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

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>

不太确定每个浏览器都会以相同的方式接受这一点。可玩的代码笔：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>

【讨论】：

你知道，我读过很多关于通过设置列表的显示属性来模仿表格布局的内容，但我从未想过尝试重置表格元素的显示属性。好主意，我现在就试试看
像魅力一样工作（无论如何在 Chrome 上，现在让它在其他浏览器上工作）。感谢您的帮助，非常感谢
对于任何感兴趣的人，我已经在几个浏览器中测试了上述两个 sn-ps：FF 53：工作正常；铬 58：工作正常； Android 7 (Galaxy S7) 上的 Chrome：工作正常（只能测试 codepen）； Android 4.4 (Nexus 5) 上的 Chrome：工作正常（只能测试 codepen）； IOS 10.3 上的 Safari（模拟 iPad Pro）：工作正常； IOS 9 (iPhone 6) 上的 Safari：工作正常（只能测试 codepen）； IE 11：工作正常。在第一个示例中，最后一个单元格中的文本没有分成两行，而是得到一个滚动条。如果需要，我确信可以解决 IE11 问题。
@AliceHeaton 非常感谢您的反馈。对于 IE11，我会尝试 max-width:100% for table/tbody 沿 display:block;
太棒了！非常感谢！

【解决方案2】：

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

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

【讨论】：