Firefox 有没有办法保持行高，所以如果数据没有填满所有主体高度，它会在最后一行下面保留一个空白空间？ IE 以这种方式运行，因此所有行都位于顶部。
我想编写一个带有固定标题的滚动表；有时表格内容的数据不足以填充固定的表格高度。
示例代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" href="reset.css"/>
<style type="text/css">
* {margin:0}
table {
border: solid #66CC99;
border-width: 0px 1px 1px 0px;
width: 400px;
}
th, td {
border: solid #66CC99;
border-width: 1px 0px 0px 1px;
padding: 4px;
}
th {
background-color: #339999;
color: #FFFFFF;
}
tr.alt td {
background-color: #EEEEEE;
}
tbody {
height: 200px;
overflow-y: auto;
overflow-x: hidden;
}
</style>
<!--[if IE]>
<style type="text/css">
div {
position: relative;
height: 200px;
width: 416px;
overflow-y: scroll;
overflow-x: hidden;
border: solid #66CC99;
border-width: 0px 0px 1px 0px;
}
table {
border-width: 1px 1px 0px 0px;
}
thead tr {
position: absolute;
top: expression(this.offsetParent.scrollTop);
}
tbody {
height: auto;
}
table tbody tr:first-child td {
padding: 29px 4px 4px 4px;
}
</style>
<![endif]-->
</head><body>
<table class="treeTable" id="table" cellpadding="0" cellspacing="0" width="100%">
<thead>
<tr>
<th id="col1" class="text" style="width: 100%;" nowrap="nowrap">NAME</th>
<th class="selectable" style="width: 14em;" id="th-122002" nowrap="nowrap">12/2002</th>
<th class="selectable" style="width: 14em;" id="th-122007" nowrap="nowrap">12/2007</th>
<th class="selectable" style="width: 14em;" id="th-072010" nowrap="nowrap">07/2010</th>
</tr>
</thead>
<tbody id="tbody">
<tr>
<td>
Name
</td>
<td>
123
</td>
<td>
123
</td>
<td>
123
</td>
</tr>
<tr>
<td>
Name
</td>
<td>
123
</td>
<td>
123
</td>
<td>
123
</td>
</tr>
</tbody>
</table>
</body></html>
最佳答案
一个在一定程度上可行但看起来并不完美的解决方案是将其添加为最后一行:
<tr style="height: 100%;"></tr>
它似乎创建了一个与该区域大小相同的空行，这意味着您可以滚动底部直到只有空白，这可能并不理想。您可能可以稍微尝试一下(可能会做一些粗略的计算，根据您拥有的行数计算出合理的高度)以获得可行的解决方案。
关于Firefox 上的 HTML 行表高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3193172/