Html 如何使表的中间列填充剩余宽度，并在必要时包装其内容

我有一个简单的页面，如下所示，用于指定用户的文件。表中每行有三个“td”。第一个TDI是标签，最后一个td是按钮。中间的td用于显示给定文件的完整路径。中间的td预计会填满剩余的空间，如果文件名太长，它应该包装其内容

<table style="width:100%;">
    <tr style="width:100%;">
        <td style="width:auto;background:red;white-space:nowrap;">
            <span>License File</span>
        </td>
        <td style="width:100%;background:blue;white-space:normal">
            <div style="display:block;">
                <span class="file_name"></span>
            </div>
        </td>
        <td style="width:auto;background:gray;white-space:nowrap;">
            <input type="button" value="Install License File" />
        </td>
    </tr>

    <tr style="width:100%;">
        <td style="width:auto;background:red;white-space:nowrap;">
            <span>Control File</span>
        </td>
        <td style="width:100%;background:blue;white-space:normal">
            <div style="display:block;">
                <span class="file_name"></span>
            </div>
        </td>
        <td style="width:auto;background:gray;white-space:nowrap;">
            <input type="button" value="Install Control File" />
        </td>
    </tr>
</table>

---

查找css显示：flex、flex:auto和flex:none。我并没有在表中使用它，但它可能就是您想要的。为第一列和最后一列设置常量宽度。它的短号码和按钮，所以你可以选择一些宽度。设置中间列的宽度：自动，设置整个表的宽度：100%，如您已有的。为了确保在任何浏览器上，都可以将最小宽度：100%添加到表中，也可以将与第一列和最后一列的宽度值相同的最大宽度添加到表中。