表格布局问题 - Firefox 与 Chrome 和 IE7答案

【问题标题】：Table layout problem - Firefox versus Chrome and IE7表格布局问题 - Firefox 与 Chrome 和 IE7
【发布时间】：2010-11-08 01:24:06
【问题描述】：

我正在尝试布局一个 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...

【问题讨论】：

标签： css firefox internet-explorer-7 google-chrome html-table

【解决方案1】：

我不了解 chrome，但我相信 IE7 需要明确的“宽度：自动；”在元素上使其正确处理“最小宽度”。这似乎没有记录在 msdn 上，但它似乎出现在 google 上。

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

（此外，在表和 colgroup 中使用 min-width 有一些限制，因此您所追求的可能实际上是不可能的。）

【讨论】：