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

Question

我有一个如下所示的表结构；

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

现在我的简单问题是我希望最后一列具有灵活的宽度，即它应该占据剩余的宽度（取决于屏幕分辨率等）

但是，它似乎仅占用了所需的空间，而没有自动扩展以占用其余空间。这与表格的布局有关吗？

Answer 1

display: flex会覆盖您需要的表默认显示模式display: table。删除它（和flex-flow: column;）。