html - 在 HTML 表格中设置列宽

Question

目前，我有一张看起来像这样的 table

<table>
    <tr>
        <th>Submitted</th>
        <th>Title</th>
        <th>Revisions</th>
    </tr>
    <tr>
        <td>Nov. 22, 2011, 2:14 a.m.</td>
        <td><a href="/essays/edit/6">Hello</a></td>
        <td>2</td>
    </tr>
</table>

我需要 Title 列尽可能宽，而其他列刚好可以包含它们的内容。我还需要表格来填充其容器(100% 宽度)。
如何实现？

Answer 1

这可能是一种快速而肮脏的 hack，但您可以简单地使用以下 CSS:

td, th {
    white-space: nowrap; /* to prevent splitting content into several lines */
}
th:nth-of-type(2) {
    width: 100%;
}

表格内的单元格无法超过其总宽度，因此它可能会起作用。

或者，您可以使用 JavaScript 动态计算中间列宽或设置固定单元格宽度。