在flex-basis处于活动状态的情况下，将表中的最后一个单元格拖放到新行

Question

我试图使一个唯一的表格单元格下降到新行占用100％的宽度。 该项目在表中使用flex，所以我尝试了其他没有成功的方法，例如colspan。

编辑：我在<tr>有一个角度指令，因此这使得仅添加新的<tr>变得困难。

我希望有人可以帮助我解决这个问题。 该项目的简单结构如下所示：

    <tr *ngIf="exampleFunction">
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td class="special">data</td>
    </tr>

小提琴的链接在下面。

https://jsfiddle.net/o4Luzbju/

Answer 1

将表行显示为多行伸缩容器。 使用flex使单元格均匀地分布空间，但是将100%宽度强制到特殊单元格上。

 table { width: 100%; } tr { display: flex; flex-wrap: wrap; } td { flex: 1; border: 1px solid grey; } .special { flex-basis: 100%; box-sizing: border-box; } 

 <table> <thead> <tr> <th>header</th> </tr> </thead> <tbody> <tr> <td>data</td> <td>data</td> <td>data</td> <td>data</td> <td class="special">special data</td> </tr> <tr> <td>data</td> <td>data</td> <td>data</td> <td>data</td> <td class="special">special data</td> </tr> </tbody> </table> 

Answer 2

使用表来执行所需的操作没有任何意义。 如果您希望该单元格成为自己的新行，则它应位于其自己的<tr></tr> 。

使用div代替表，可以更好地适应您的情况。

Answer 3

表单元格是其父行容器的子级。要执行类似的操作，您可以隐藏表中最后一个单元格的边框，然后在该单元格中不放置任何内容。然后创建新行

例

 table { width: 100%; } td { flex: 100%; flex-basis: 200px; min-width: 200px; border: 1px solid grey; } .special { text-align: center; } #null { border: none } 

 <table> <thead> <tr> <th>header</th> </tr> </thead> <tbody> <tr> <td>data</td> <td>data</td> <td>data</td> <td>data</td> <td id='null'></td> </tr> <tr> <td class="special">Special data</td> </tr> </tbody> </table> 

Answer 4

您可以将表行（ <tr> ）设置为flex容器，并可以选择将项目包装到新行上。

然后将td.special的初始宽度设置为100％。

table {
  width: 100%;
}

tr {
  display: flex;   /* Initiate flexbox on the container */
  flex-wrap: wrap; /* Let flex items wrap to new line */
}

td {
  flex: 1 0 auto;  /* Flex item to grow to available width */
  border: 1px solid grey;
}

td.special {
  flex: 1 0 100%;  /* Flex item's initial width to be 100% */
}