3

编辑2：

问题似乎出在“bigTable”元素的规则上。显然，在布局模板上使用时继承了错误的最小宽度。我还在调查这个。

不过，我将再试一次 div。一个大问题是使用固定导航和动态内容，但我已经找到了解决方案（http://alistapart.com/article/holygrail）。

感谢您的建议和所有可爱的 trolololo。

编辑：

我将此问题复制到http://jsbin.com/eyitij/4/edit

我对 table + td 宽度有一个奇怪的问题。我有类似这样的代码：

<table class="mainLayout" style="width: 100%;">
    <tr>
        <td style="width: 250px;">
            <div id="leftNavigationPanel"> * content * </div>
        </td>
        <td id="panelCell">
            <div class="panel">
                 <table id="bigTable" width="100%"> * LOTS OF CONTENT, includes big table * </table>
            </div>
        </td>
    <tr>
</table>

当我在浏览器上运行这段代码时，mainLayout 被溢出，所以它变成了 3600px，这是因为 Panel 里面的大表。

我指的大表可以包含在屏幕中。完成后，它会获得水平滚动条（这是我想要的）。如果使用规则“宽度：100%”将大表加载到单独的 html 文件中，则此方法有效。

添加 mainLayout 规则“display: block;”后，mainLayout 表呈现 ~1800px 并包含在屏幕内，但问题是“panelCell”-TD 仍然是 ~3400px 宽，所以我仍然有整个页面滚动.. . TD 不包含在表格中，但总是扩展为 250px + bigTable.width() ！？

基本上浏览器不知道如何计算“panelCell”来填充：window.width - leftNavigationPanel。

任何想法如何在不使用“panelCell”的javascript +预先计算的最大宽度规则的情况下制定正确的规则？

  • panelCell 必须包含在窗口中
  • bigTable 必须包含在 panelCell 中，带有滚动条
4

1 回答 1

10

设置 table-layout:fixed 修复了很多关于表格的奇怪问题：

<table style="table-layout:fixed;">
<col style="width:250px"/>
<col/>
<tr>
...
于 2013-01-28T09:42:32.330 回答