如何将表格单元格强制换行？

Question

如何将表格单元格强制换行？

9

我有一张HTML表格（由MVC WebGrid生成），横向有5列。我想让前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或list元素上使用display:table / table-row / table-cell CSS属性的问题。

我正在尝试的是否可能仅使用CSS修改当前的HTML来实现，或者更有可能需要完全重写HTML结构（因此可能要放弃WebGrid），以使其按照我想要的方式显示？

- Dark Hippo

我认为这是不可能的，除非使用JS从tr中删除单元格并将其放入下面的另一个tr中。 - evolutionxbox

1

我支持@evolutionxbox的观点。你不能只编辑WebGrid的模板，将表格改为div吗？ - timgavin

我其实不知道，我对WebGrids的经验不是很丰富。我一直试图避免这种情况，因为这意味着基本上要重新做整个表格的结构，但我开始觉得那可能是唯一的方法了。 - Dark Hippo

2个回答

0

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

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

- ByteEater

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- G-Cyrillus · Accepted Answer

您可以尝试重置表元素的显示属性并使用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

要将td元素堆叠，可使用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>