我希望能够在 div 上设置最大宽度并使用滚动条处理溢出。
这在 FF 中有效,但在 IE 或 chrome 中效果不佳......滚动部分似乎工作正常但表格的宽度不像在 FF 中那样调整,宽度仍然占 chrome 中的可滚动 div和浏览器。 FF 主表调整完美。
我知道你不应该使用 <div>
在 <span>
里面等,只是想知道如何完成这个溢出......
这是我的例子:
<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;
}
最佳答案
是否有必要使用“最大宽度”?
当使用“宽度”代替时,我在 IE 中获得了很好的结果。
在 IE8 和 FF6.0.2 中测试
编辑:或者为了保持最大宽度值,我想这也行:
max-width: 200px !important;
width:200px;
关于html - 使用CSS在表格单元格内滚动div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7599765/