如何强制表格单元格到新行

Question

我有一个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)以使其显示我想要的内容？

Answer 1

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