使用css在表格单元格内滚动div答案

【问题标题】：Scrollable div inside table cell using css使用css在表格单元格内滚动div
【发布时间】：2011-09-29 15:34:02
【问题描述】：

我希望能够在 div 上设置最大宽度并使用滚动条处理溢出。这在 FF 中有效，但在 IE 或 chrome 中效果不佳......滚动部分似乎工作正常，但表格的宽度不像在 FF 中那样调整，宽度仍然占 chrome 中的可滚动 div和IE。 FF 主表完美调整。我意识到您不应该在<span> 等内部使用<div>，只想了解如何完成此溢出...

jsFiddle

这是我的例子：

<div>     
    <table style="width: 100%">
        <tr>
            <td>foo</td>
            <td>bar</td>
        </tr>
        <tr>
            <td colspan="2" class="uiTest">
                <span>
                    <div class="uiTableContainer">
                        <table class="uiTable" cellspacing="0">                                     <tbody>
                            <tr class="uiTableRow">
                                <td>
                                    foo
                                </td>
                                <td>
                                    foo
                                </td>
                                <td>
                                    foo
                                </td>
                                <td>
                                    foo
                                </td>
                                <td>
                                    foo
                                </td>
                                <td>
                                    foo
                                </td>
                                <td>
                                    foo
                                </td>
                                <td class="uiTableAction">
                                    foo
                                </td>
                                <td>
                                    foo
                                </td>
                                <td>
                                    foo
                                </td>
                                <td>
                                    foo
                                </td>
                                <td>
                                    foo
                                </td>
                                <td>
                                    foo
                                </td>
                                <td>
                                    foo
                                </td>
                                <td>
                                    foo
                                </td>
                                <td>
                                    foo
                                </td>
                                <td>
                                    foo
                                </td>
                                <td>
                                    foo
                                </td>
                                <td>
                                    foo
                                </td>
                                <td>
                                    foo
                                </td>
                                <td>
                                    foo
                                </td>
                                <td class="uiTableAction">
                                    foo
                                </td>
                                <td>
                                    foo
                                </td>
                                <td>
                                    foo
                                </td>
                                <td>
                                    foo
                                </td>
                                <td>
                                    foo
                                </td>
                                <td>
                                    foo
                                </td>
                                <td>
                                    foo
                                </td>
                                <td>
                                    foo
                                </td>
                                <td>
                                    foo
                                </td>
                                <td>
                                    foo
                                </td>
                                <td>
                                    foo
                                </td>
                                <td>
                                    foo
                                </td>
                                <td>
                                    foo
                                </td>
                                <td>
                                    foo
                                </td>
                                <td class="uiTableAction">
                                    foo
                                </td>
                                <td>
                                    foo
                                </td>
                                <td>
                                    foo
                                </td>
                                <td>
                                    foo
                                </td>
                                <td>
                                    foo
                                </td>
                                <td>
                                    foo
                                </td>
                                <td>
                                    foo
                                </td>
                                 <td>
                                    foo
                                </td>
                                <td>
                                    foo
                                </td>
                                <td>
                                    foo
                                </td>
                                <td>
                                    foo
                                </td>
                                <td>
                                    foo
                                </td>
                                <td>
                                    foo
                                </td>
                                <td>
                                    foo
                                </td>
                                <td class="uiTableAction">
                                    foo
                                </td>
                                <td>
                                    foo
                                </td>
                                <td>
                                    foo
                                </td>
                                <td>
                                    foo
                                </td>
                                <td>
                                    foo
                                </td>
                                <td>
                                    foo
                                </td>
                                <td>
                                    foo
                                </td>
                                <td>
                                    foo
                                </td>
                                <td>
                                    foo
                                </td>
                                <td>
                                    foo
                                </td>
                                <td>
                                    foo
                                </td>
                                <td>
                                    foo
                                </td>
                                <td>
                                    foo
                                </td>
                                <td>
                                    foo
                                </td>
                                <td class="uiTableAction">
                                    foo
                                </td>
                                <td>
                                    foo
                                </td>
                                <td>
                                    foo
                                </td>
                                <td>
                                    foo
                                </td>
                                <td>
                                    foo
                                </td>
                                <td>
                                    foo
                                </td>
                                <td>
                                    foo
                                </td>
                                <td>
                                    foo
                                </td>
                                <td>
                                    foo
                                </td>
                                <td>
                                    foo
                                </td>
                                <td>
                                    foo
                                </td>
                                <td>
                                    foo
                                </td>
                                <td>
                                    foo
                                </td>
                                <td>
                                    foo
                                </td>
                                <td class="uiTableAction">
                                    foo
                                </td>
                                <td>
                                    foo
                                </td>
                                <td>
                                    foo
                                </td>
                                <td>
                                    foo
                                </td>
                                <td>
                                    foo
                                </td>
                                <td>
                                    foo
                                </td>
                                <td>
                                    foo
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </span>
            </td>
        </tr>
         <tr>
            <td>foo</td>
            <td>bar</td>
        </tr>
    </table>
</div>

还有css：

.uiTable{
   border: 1px solid red;  
   width: 100%;
}

.uiTableContainer{

    max-width: 200px;
    overflow: auto;
}

【问题讨论】：

我看不出问题出在哪里，在 IE9、Chrome 16.0.891 dev 和 ff 6.0.2 中的渲染完全相同
不，先生，他们没有。即使内表在 IE7、IE8 和 chrome 14.0.835 中具有滚动条，外表也会拉伸内表的宽度，从而为内表和视口本身创建滚动条。
你为什么要把一个 div 放在一个 span 中呢？如果您希望 div 像 span 一样工作，请使用 CSS。
@Drackir，我在我的 OP 中特别指出我不需要对此发表评论。坚持手头的问题，而不是挑毛线。

标签： html css

【解决方案1】：

你有必要使用“最大宽度”吗？

当使用“宽度”代替时，我在 IE 中得到了很好的结果。

试试：http://jsfiddle.net/NCB3a/

在 IE8 和 FF6.0.2 中测试

编辑：或者为了保持最大宽度值，我想这也可以：

max-width: 200px !important;
width:200px;

【讨论】：