HTML表自动扩展最后一列以占用剩余宽度

Question

I have a table structure which looks like below;

<table style="width: 100%; display: flex; flex-flow: column; table-layout: fixed">
<thead style="width: 100%">
<th style="width: 10%; min-width: 10rem">Col1</th>
<th style="width: 20%; min-width: 20rem">Col2</th>
<th style="width: 30%; min-width: 30rem">Col3</th>
<th>Col with no explicit width defined (I want this col to expand)</th>
</thead>
<tbody>
<tr>
<td>Col1</td>
<td>Col2</td>
<td>Col3</td>
<td>Col4</td>
</tr>
</tbody>
</table>

Now my simple question is I want the last column to have flexible width ie it should occupy whatever is the remaining width (depending on the screen resolution, etc)

However, it seems to be taking only the required space and not automatically expanding to take rest of the space. Is that something which is possible to do with the table layout ?

Answer 1

display: flex overwrites the tables default display mode display: table , which you need. Remove it (and flex-flow: column; ).