强制 html 表格使用 colgroup 宽度答案

【问题标题】：Force html table to use colgroup widths强制 html 表格使用 colgroup 宽度
【发布时间】：2014-08-13 16:37:03
【问题描述】：

这是一个示例：JsFiddle

我有一个包含 3 列的表格。每个应该有 500px。但我的表格已调整大小以适合父 div (600px)。

我的表格的宽度应该是 1500 (3x500)，并且应该在父 div 中显示滚动条。如何在不添加“width=XXX”的情况下解决此问题？

<div id="container">
<table id="table">
    <colgroup>
        <col style="width: 500px"></col>
        <col style="width: 500px"></col>
        <col style="width: 500px"></col>
    </colgroup>
    <tr>
        <td>A</td>
        <td>B</td>
        <td>C</td>
    </tr>
    <tr>
        <td>A</td>
        <td>B</td>
        <td>C</td>
    </tr>
</table>

【问题讨论】：

在您的col 标签中放置min-width 而不是width 在Firefox 中有效。然而，显然由于 CSS2.1 规范中未定义的行为，它至少在 Chrome 中还没有实现（并且不起作用）。（根据developer.mozilla.org/en-US/docs/Web/CSS/min-width，IE 和 Safari 也不支持它——不过我无法测试它们）。

标签： html-table width

【解决方案1】：

将min-width 应用于table 标记（如我对OP 的评论中所述，它不适用于col）。

更新的 CSS：

#table {
    table-layout:fixed;
    margin:3px;
    border-collapse:collapse;
    min-width: 1500px;
}

在 Chrome 和 Firefox 中测试，应该得到广泛支持（根据caniuse）。

编辑我已经意识到这个答案实际上并没有回答你的问题，因为它解决了 col 标签问题而不是解决它。无论如何，我希望它有所帮助。

【讨论】：