如何使表格单元格拉伸其余宽度？ [复制]答案

【问题标题】：How to make a table cell stretch for the rest of the width? [duplicate]如何使表格单元格拉伸其余宽度？ [复制]
【发布时间】：2018-07-13 03:22:21
【问题描述】：

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

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

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

我可以使用 flex 按行执行此操作，但第一/最后一列不会跨行对齐。另外，我不想为第一列/最后一列设置固定宽度。

【问题讨论】：

在中间添加 width:100%
@TemaniAfif OMG，就这么简单，它有效！！！

标签： html css flexbox

【解决方案1】：

你可以用这个 CSS 代码做到这一点：

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

【讨论】：

【解决方案2】：

根据@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>

【讨论】：