HTML表格占页面的100%以上

首先，我要说的是，我知道你不应该使用表格来进行布局——我正在修复其他人的代码

我有一个菜单，实际上只是一张有两行的桌子。最上面一行是横幅，最下面一行是一个

，里面有一堆菜单项

出于某种原因，这在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>

如果我对“inspect element”使用Chrome功能，我可以看到表格行占据了页面的100%以上——突出显示的区域延伸到屏幕的一侧。如果我在表格周围使用div，我可以看到div在周围留下了一些空白，但是div内的表格仍然坚持渲染100%以上的效果

---

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

我无法在Chrome中复制此问题

使用以下CSS规则

ul { text-decoration:none;}
li { display:inline;}

我的列表项目包装

对于在黑暗中拍摄，请尝试应用以下样式：

ul { white-space:normal; }

在正常情况下，空格序列将折叠为单个空格。文本将在必要时换行。这是默认设置

如果我使用

ul { white-space:nowrap; }

---

我可以实现您描述的演示行为。

尝试删除

空白：nowrap

来自td风格（来自您在此处发布的示例：）

您有现场示例吗？这里看起来不错，iframe的宽度是多少？如果它以像素为单位比表的100%以像素为单位表示的宽度更大，那么表将增长以匹配其内容。这是一个非常酷的工具。我想这更接近我所拥有的。。。iFrame设置为100%宽度——我已经更新了JSFIDLE中的示例，以反映我们现在知道不使用表格进行布局的有趣之处。当我在98年开始工作的时候，桌子是一种新的东西，每个人都知道你不使用框架来布局。想知道未来5年会给我们带来什么：）