IE7中的表格单元格宽度为“table-layout:fixed”表

时间:2011-02-14 19:15:02

标签: html css internet-explorer-7

我有一张桌子用作网页上的工具栏。它适用于除IE7以外的所有浏览器。问题是它扩展了表以适应内容(将内容推离屏幕),除非我在CSS中指定“table-layout:fixed”。当我将表格布局设置为固定时,它会使所有单元格大小相同,但我希望它们自动调整大小以适应内容(如果需要,还可以自动换行)。在单元格上设置“width:auto”不会执行任何操作。

这是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尊重它),同时仍然让表格单元格的宽度自动调整大小?

编辑:添加了代码示例。

3 个答案:

答案 0 :(得分:2)

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

答案 1 :(得分:0)

您需要为整个表格设置表格宽度 除此之外,只有一个选项,手动设置表格宽度(通过使用大多数现代浏览器包含的开发工具(IE8 +,FireFox,Chrome,Safari等)轻松收集,您可以在那里读取宽度)。否则我不知道。

答案 2 :(得分:0)

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