Alex Tarkowski Alex Tarkowski - 1 month ago 9
HTML Question

Drop last cell in a table to a new row with flex-basis active

I am trying to get a unique table cell to drop to a new row take up 100% width. The project is using flex in the table so I have tried other methods with no success, such as colspan.

Edit: I have an angular directive in the , so this makes it difficult to just add a new

I was hoping someone could help me out with this. A simple structure of the project looks like so:

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


Thank you and the fiddle link is below.

https://jsfiddle.net/o4Luzbju/

Answer

Display the table rows as multiline flex containers. Use flex to make the cells distribute the space equally, but force a 100% width to the special cell.

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>