可滚动 div 挤压单元格中的宽表

Question

我有一个包含任意数量的列和行的表格，并且 标记具有高度和宽度。我的问题是，当我把它放在

中时，overflow:scroll 的宽度小于表格的宽度，表格单元格会被压扁，即使我有一个指定的宽度。

我做了一堆测试，如果我指定表格的宽度，它看起来很好。必须有一种不用指定表格宽度的 CSS 方式。

这是我的代码和 css 的要点以及一个 JSFiddle 演示（列数无关紧要，只要它大于 div 的宽度即可

<div class="wrapper">
    <table cellspacing="0" cellpadding="0" class="Colors">
        <tbody>
            <tr>
            <td><td>
            <td><td>
            <td><td>
            <td><td>
            <td><td>
            <td><td>
            <td><td>
            <td><td>
        </tbody>
    </table>
</div>

CSS：

table.Colors td {
    width:25px;
    height:25px;
    font-size:.8em;
    line-height:25px;
    border:1px solid #c0c0c0;
    padding:0;
    margin:0;
}

.wrapper {
    overflow:scroll;
    width:300px;
    height:300px;
}

http://jsfiddle.net/nightcatbooks/L7gwwyL4/

【问题讨论】：

• 很抱歉。链接已修复。

Answer 1

为单元格指定min-width，以免它们被压扁：

table.Colors td {
    width:25px;
    min-width:25px;

可能不适用于旧版浏览器（IE7？未测试）

工作小提琴：http://jsfiddle.net/pxth1hph/