CSS表格100%宽度，td宽度

Question

编辑2:

问题似乎出在"bigTable"元素的规则上。显然，当在布局模板中使用时，th会继承错误的最小宽度。我仍在调查这个问题。

尽管如此，我将再尝试一次divs。一个大问题是使用固定的导航栏和动态内容，但我已经找到了这个问题的圣杯解决方案（http://alistapart.com/article/holygrail）。

感谢建议和所有美丽的trolololo。

---

编辑:

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

---

我有一个关于表格+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中有一个大表格所致。

我提到的大表格可以放入屏幕中。这样做可以获得水平滚动条（这正是我想要的）。如果将big-table加载到带有规则“width: 100%”的单独html文件中，则可以实现此效果。

在为mainLayout添加“display:block;”规则后，mainLayout表格被渲染为约1800px，并且被包含在屏幕内。但问题在于“panelCell”-TD仍然很宽，约3400px，因此我仍然需要整个页面滚动... TD未包含在表格内，而是始终扩展到250px + bigTable.width()！？

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

有什么好的方法来制定正确的规则，而不使用JavaScript和针对“panelCell”的预先计算的最大宽度规则吗？

• panelCell必须包含在窗口中
  
• bigTable必须包含在具有滚动条的panelCell中

- Janne

---

你为什么要使用表格来进行页面布局？ - Dai

CSS-Layouts-Without-Tables - jantimon

你是想让它们只是适应大小，还是想在表格内部添加滚动条呢？ - bjedrzejewski

Answer 1

设置table-layout:fixed可以解决许多关于表格的奇怪问题：

<table style="table-layout:fixed;">
<col style="width:250px"/>
<col/>
<tr>
...

- Jean-Georges