IE7中的表格单元格宽度，带有“表格布局：固定”表格答案

【问题标题】：Table cell width in IE7 with "table-layout: fixed" tableIE7中的表格单元格宽度，带有“表格布局：固定”表格
【发布时间】：2011-06-27 03:30:15
【问题描述】：

我有一个表格用作网页上的工具栏。它适用于除 IE7 之外的所有浏览器。问题是它会扩展表格以适应内容（将内容推离屏幕），除非我在 CSS 中指定“表格布局：固定”。当我将表格布局设置为固定时，它会使所有单元格大小相同，但我希望它们自动调整大小以适应内容（如果需要，还可以自动换行）。在单元格上设置“宽度：自动”没有任何作用。

这是 HTML：

<table id="ToolbarTable" cellspacing="0px">
    <tr>
        <td class="ToolbarCell" align="center">
            Button1
        </td>
        <td class="ToolbarCell" align="center">
            Button2 Button3 Button4
        </td>
        <td class="ToolbarCell" align="center">
            Button5 Button6 Button7 [Button8 Button9 - not always visible]
        </td>
    </tr>
</table>

还有 CSS：

#ToolbarTable
{
    margin-top: 1px;
    width: 100%;
    min-height: 24px;

    table-layout: fixed;
    word-wrap: break-word;
}

#ToolbarTable td
{
    min-width: 50px;
    width: auto;
    border: solid 1px #000000;
}

在 IE7 中，如何使表格具有特定宽度（并让 IE7 对其进行优化），同时仍让表格单元格的宽度自动调整大小？

编辑：添加代码示例。

【问题讨论】：

标签： html css internet-explorer-7

【解决方案1】：

您需要为整个表格设置表格宽度。
否则只有一个选项，手动设置表格宽度（通过使用大多数现代浏览器包括的开发工具（IE8+、FireFox、Chrome、Safari 等）很容易收集，您可以在那里读取宽度）。不然我不知道。

【讨论】：

是的，我可以手动设置，但有时会显示比其他时间更多的按钮，我不想根据当时的内容重新计算每个单元格的宽度，我只想像 IE7 一样自动调整单元格大小并尊重表格宽度:(
抱歉，我不知道，IE 在样式方面也给我带来了很多麻烦。总是惹麻烦。

【解决方案2】：

尝试将min-width 与一组width 结合使用。我相信这种组合应该适用于 IE 7。

【讨论】：

min-width 似乎没有任何影响。我可以设置宽度，但我希望它自动调整大小以适应内容。
您需要将宽度设置为数值才能在 ie7 中工作。自动不起作用。 width:50px;min-width:50px 是否为您提供所需的行为？
不，它只会使单元格宽 50 像素。我可能必须使用 javascript hack 并计算每个 div 的大小，但这似乎需要做很多工作，因为我必须确保我不超过窗口的宽度并平均缩小所有单元格以使其适合如果确实如此。
这听起来确实工作量太大。祝你好运。

【解决方案3】：

虽然按钮之间有空格，但我也有一些&nbsp; 空格，它阻止了自动换行并导致表格宽度超过了我指定的宽度。从按钮之间删除&nbsp; 解决了这个问题。每个&nbsp; 都被一个空格包围（我只是想添加更多空格），并且所有其他浏览器都正确地进行了换行，但是 IE7 必须要么删除多余的空格，要么假设它们应该是&nbsp; 空格。

【讨论】：