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

Question

我有一个包含任意数量的列和行的表，<td>标签具有高度和宽度。我的问题是当我把它放在带有溢出的<div>时：滚动并且宽度小于表格的宽度，表格单元格会被压扁，即使我有一个指定的宽度。

我做了一堆测试，如果我指定表的宽度，它看起来很好。必须有一种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/