可滚动 div 压缩单元格中的宽 table

Question

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

中时 overflow:scroll 并且宽度小于 table，table 单元格被压扁，即使我在它们上面指定了宽度。

我做了很多测试，如果我指定 table 的宽度，它看起来很好。在不指定 table 宽度的情况下，必须有一种 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？未测试）

工作fiddle：http://jsfiddle.net/pxth1hph/