如何使表格单元格在其余宽度上伸展？

Question

我正在尝试创建一个包含3列的简单表格：第一个/最后一个应该采用其孩子的确切宽度，而中间一个应该拉伸并填充其余部分。

.table {
  display: table;
  width: 100%;
}

我尝试同时使用<table>元素和flex-但不确定如何实现。

我可以使用flex在每行中做到这一点，但是第一/最后一列将不会在行之间对齐。另外，我不想为第一列/最后一列设置固定宽度。

Answer 1

基于@TemaniAfif注释，答案非常简单：

<table>
    <tr>
        <td>1</td>
        <td style='width: 100%;'>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>4</td>
        <td>-</td>
        <td>6</td>
    </tr>
</table>

Answer 2

您可以使用以下CSS代码执行此操作：

.table tr td:nth-child(2) { width:100% }