html - 使用CSS在表格单元格内滚动div

Question

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

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;
}

Answer 1

是否有必要使用“最大宽度”？

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

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

在 IE8 和 FF6.0.2 中测试

编辑:或者为了保持最大宽度值，我想这也行:

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