Question

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

所有html, body, table的高度均为100%。中间一行还有一个td height: 100%，因此它可以整齐地填满剩余的空间：http://jsfiddle.net/9cEhc/2/。

然而，当数据不适合中间行时，我想显示一个滚动条，以便表格保持100％的高度，你可以滚动中间一行。不知何故，这是行不通的;相反，表格在垂直方向上增长（即使CSS仍然指出它的高度应该是100％），并且滚动条显示但是被禁用（因为没有什么可以滚动，因为表已经拉伸了）：http://jsfiddle.net/9cEhc/3/

因此，该表格设置为height: 100%，但是身体是例如456px高，桌子（身体的直接孩子）是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上运行。我不介意其他浏览器。

如果数据太多，如何阻止表拉伸，而是显示中间行的滚动条？

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>

表格中的“高度：100％”使其高于父级

1 个答案: