Question

我有一个包含任意数量的列和行的表格，＆lt; td＆gt; 标记的高度和宽度。我的问题是，当我把它放在＆lt; div＆gt; 中，溢出：滚动并且宽度小于表的宽度时，表格单元格会被挤压，即使我有一个指定的宽度。

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

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

1 个答案: