1

我正在尝试使用col元素为表格单元格提供最小宽度colgroup。由tablea 包裹，div其中设置了一些宽度（小于 中设置的所有单元格的组合宽度col），并且overflowofdiv设置为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宽度设置为我需要的总宽度。这将要求我table每次通过 JavaScript 插入新列时更新宽度。

我的解决方案 -

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

这是正确的做法吗？为什么会这样？

jsFiddle链接

4

1 回答 1

0

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

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

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

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

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

于 2013-02-19T09:49:55.307 回答