Question

我正在尝试布局一个HTML表格（它是表格数据），它在Firefox 3.5和Chrome 2.0.172（EDIT和IE7 - 呈现像Chrome一样的表格）中的渲染方式不同。

我把表放在div中：

<div id="listcontainer">
  <table class="tasklist">
    <colgroup>
      <col class="narrow" />
      <col class="wide" />
      {{ more column definitions here }}
    </colgroup>
{{ various code here }}
  </table>
</div>

我得到了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; 
}

在Firefox中，表格渲染比包含div更宽，div上的滚动条允许用户滚动到其他列（这是预期的操作）。但是，Chrome和IE7似乎忽略了列的min-width属性，并将整个表格变成了包含div。哪个不我想要什么。我做错了什么？

编辑：我将min-width元素放在th和td元素本身而不是使用colgroup，然后在所有三个浏览器中按预期呈现。使用cols，检查Chrome中的元素表示计算的样式已经使列宽度适合div ...

Answer 1

我不知道chrome，但我相信IE7需要一个明确的“width：auto;”在元素上正确处理“最小宽度”。这似乎没有在msdn上记录，但它似乎出现在谷歌。

http://blog.throbs.net/2006/11/17/IE7+And+MinWidth+.aspx
http://msdn.microsoft.com/en-us/library/ms530820(VS.85).aspx

（另外，对于使用表格和组合的最小宽度存在一些限制，因此您可能实际上无法实现。）

表布局问题 - Firefox与Chrome和IE7

1 个答案: