表格单元格（td，th）不采用 colgroup 中给定的宽度答案

【问题标题】：Table cells(td, th) doesn't take width given in colgroup表格单元格（td，th）不采用 colgroup 中给定的宽度
【发布时间】：2013-02-19 17:49:55
【问题描述】：

我正在尝试使用colgroup 的col 元素为表格单元格指定最小宽度。 table 由 div 包裹，该 div 设置了一些宽度（小于 col 中设置的所有单元格的组合宽度），并且 div 的 overflow 设置为 auto。

这是我的 html 代码 -

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        .table-block {
            border-spacing: 0;
            border-collapse: collapse;
        }

        .cell {
            padding: 5px 10px;
            border: 1px solid silver;
        }
    </style>
</head>
<body>
<div style="width:200px;overflow: auto">
    <table class="table-block">
        <colgroup>
            <col style="width:300px">
            <col style="width:300px">
        </colgroup>
        <tbody>
        <tr>
            <td class="cell"><em>2(0,2)</em></td>
            <td class="cell"><em>3(0,3)</em></td>
        </tr>
        <tr>
            <td class="cell"><em>2(0,2)</em></td>
            <td class="cell"><em>3(0,3)</em></td>
        </tr>
        </tbody>
    </table>
</div>
</body>
</html>

我的问题是单元格不占用col 的宽度。它试图让自己适应包装器div。我希望单元格采用给定的正确宽度，并且应该出现一个滚动条。我有一个解决方案，我将 table 宽度设置为我需要的总宽度。这将要求我每次通过 JavaScript 插入新列时更新 table 宽度。

我的解决方案 -

<div style="width:200px;overflow: auto">
        <table class="table-block" style="width:600px">
        <!-- table things -->
</div>

这样做是对的吗？为什么会这样？

jsFiddle link

【问题讨论】：

标签： html css

【解决方案1】：

我认为这里的问题是最终表格默认为容器的 100% 宽度，并且如果没有内容强制它这样做，它的内部元素无法超越这一点。尝试为 tr 或 td 提供大于表自身的宽度时也会发生同样的情况。

您的解决方法与我的做法差不多。我要做的唯一改变是：

<div style" ... overflow-x:scroll; overflow-y:hidden;">

这样滚动条就不会出现在旧版本的 IE 上。

这当然假设您只希望表格水平滚动。

【讨论】：