HTML 表格占页面的 100% 以上

Question

首先我只想说我知道你不应该使用表格进行布局 - 我正在这里修复其他人的代码。

我有一个菜单，它实际上只是一个有 2 行的表格。顶行是横幅，底行是 <ul>里面有一堆菜单项。

现在出于某种原因，这在 IE 中可以完美运行，但在 Chrome 中无法运行。问题是，如果您的菜单项多于页面上无法显示的菜单项，Chrome 似乎根本不会呈现这些元素，而 IE 会包装这些元素并在下一行显示额外的元素。 IE 行为正是我要寻找的。

<table id="menu_table" width="100%" style="border:collapse" cellpadding="0" cellspacing="0" marginwidth="0" marginheight="0" leftmargin="0" topmargin="0">
    <tr>
        <td valign="top" colspan=2>
            <!-- iframe with banner -->
        </td>
    </tr>
    <tr>
        <td class="header>" valign="top" style="textweight:normal; " >
            <!-- ul with lots if li items -->
        </td>
        <td class="header" >
            <!-- another control -->
        </td>
    </tr>
</table>

如果我将 Chrome 功能用于“检查元素”，我可以看到表格行占据了超过 100% 的页面 - 突出显示的区域延伸到屏幕的一侧。如果我在表格周围使用 div，我可以看到 div 在它周围留下了一点边距，但 div 内的表格似乎仍然坚持渲染超过 100%。

您可以在 jsfiddle 上看到这一点。 - 如果您在 IE 中查看它，它将换行到下一行，如果您在 Chrome 中查看它，它将从页面上消失

Answer 1

尝试从 td 样式中删除 white-space: nowrap;(来自您在此处发布的示例:http://jsfiddle.net/8KbPF/12/)