Question

我希望能够在div上设置最大宽度，并使用滚动条处理溢出。这适用于FF，但不是在IE或Chrome中这么好......滚动部分似乎工作正常但是表格的宽度不像在FF中那样调整，宽度仍然在考虑chrome中的可滚动div和IE。 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

是否有必要使用“max-width”？

在使用“宽度”时，我在IE中取得了不错的效果。

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

在IE8和FF6.0.2中测试

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

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

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

1 个答案: