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模型：

＆＃13;

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 */
}

＆＃13;

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

＆＃13;

不太确定每个浏览器都会以相同的方式接受此操作。使用的codepen：http://codepen.io/anon/pen/WvwpQq

堆叠tds，然后display:block：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

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

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

2 个答案: