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