我正在尝试布局一个
HTML表格(它是表格数据),它在Firefox 3.5和Chrome 2.0.172(EDIT和IE7 – 呈现像Chrome这样的表格)中的呈现方式不同.
@H_403_2@我把桌子放在div里面:
<div id="listcontainer"> <table class="tasklist"> <colgroup> <col class="narrow" /> <col class="wide" /> {{ more column definitions here }} </colgroup> {{ varIoUs code here }} </table> </div>@H_403_2@而且我有div和table的css:
div#listcontainer { position: relative; float: left; width: 98%; padding: 0; border: 1px; overflow-x: scroll; } table.tasklist { width: auto; table-layout: auto; border: thin solid; font-size: 9pt; border-collapse: collapse; empty-cells: show; } col.narrow { min-width: 50px; } col.wide { min-width: 200px; }@H_403_2@在Firefox中,表格渲染比包含div更宽,div上的滚动条允许用户滚动到其他列(这是预期的操作).但是,Chrome和IE7似乎忽略了列的min-width属性,并将整个表格包含在包含div中.这不是我想要的.我究竟做错了什么? @H_403_2@编辑:我将最小宽度元素放在th和td元素本身而不是使用colgroup,然后它在所有三个浏览器中按预期呈现.使用cols,检查Chrome中的元素表示计算出的样式已经使列宽度适合div内部…
解决方法
我不知道chrome,但我相信IE7需要一个明确的“width:auto;”在元素上正确处理“最小宽度”.这似乎没有在msdn上记录,但它似乎出现在谷歌上.
@H_403_2@http://blog.throbs.net/2006/11/17/IE7+And+MinWidth+.aspx
http://msdn.microsoft.com/en-us/library/ms530820(VS.85).aspx @H_403_2@(另外,对表和colgroup使用min-width有一些限制,所以你可能实际上无法实现.)
http://msdn.microsoft.com/en-us/library/ms530820(VS.85).aspx @H_403_2@(另外,对表和colgroup使用min-width有一些限制,所以你可能实际上无法实现.)