css - 表上的 "height: 100%"使其高于父级

Question

我有一个表格，其中包含一个标题行、一个页脚行和中间的一行数据。

所有 html、body、table 的高度都为 100%。中间一行还有一个 td 和 height: 100% 以便它整齐地填满剩余空间:http://jsfiddle.net/9cEhc/2/。

但是，当数据不适合中间行时，我想显示一个滚动条，以便表格保持其 100% 的高度，您可以滚动中间行。不知何故，这是行不通的；相反，表格在垂直方向上增长(即使 CSS 仍然声明其高度应为 100%)，并且显示了滚动条但已禁用(因为表格已经拉伸(stretch)时没有任何内容可滚动):http://jsfiddle.net/9cEhc/3/。

因此，表格设置为 height: 100%，但是尽管正文是例如456px 高，表格(body 的直接子级)高 1368px，这是不应该发生的。

HTML:

<table>
    <tr>
        <td>
            header
        </td>
    </tr>
    <tr class="fillup">
        <td>
            <!-- much data that doesn't fit in the row -->
        </td>
    </tr>
    <tr>
        <td>
            footer
        </td>
    </tr>
</table>

CSS:

html, body, table, tbody {
    width: 100%;
    height: 100%;
}

html, body, table, tbody, tr, td {
    padding: 0;
    margin: 0;
}

.fillup td {
    height: 100%;
    overflow-y: scroll;
}

附带说明一下，我想让它在 Chrome 上运行。我不太介意其他浏览器。

如何在数据过多的情况下防止表格拉伸(stretch)，而是在中间行显示滚动条？

Answer 1

试试这个解决第一个问题(比父问题大):http://jsfiddle.net/9cEhc/4/

<table cellpadding="0" cellspacing="0">

我不知道如何通过 CSS 将 cellspacing 设置为 0。

编辑:

使用滚动条(Chrome)的工作演示:http://jsfiddle.net/9cEhc/5/

但是你确实需要在 td 中放置一个 DIV。

<table cellpadding="0" cellspacing="0">
    <tr>
        <td>
            header
        </td>
    </tr>
    <tr class="fillup">
        <td>
            <DIV STYLE="overflow-y: scroll; overflow-x: no; height: 100%; width: 100%">
            list<br>list<br>list<br>list<br>list<br>list<br>
            list<br>list<br>list<br>list<br>list<br>list<br>
            ............ // and more
        </div>
        </td>
    </tr>
    <tr>
        <td>
            footer
        </td>
    </tr>
</table>