我正在尝试将表格高度设置为100％并且具有可滚动的tbody。为什么我的html元素在浏览器窗口之外增长？如何获取tbody而不是html元素的滚动条？我已经检查并尝试了我能找到的所有解决方案，但似乎没有一个可以与我的桌子一起使用。
HTML：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
Table with autoscroll and fixed headers
</title><link rel="stylesheet" type="text/css" href="autoscroll.css" />
<script>
function scrollElementById(elementId) {
document.getElementById(elementId).scrollTop = document.getElementById(elementId).scrollTop + 1;
scrolldelay = setTimeout('scrollElementById(\'' + elementId + '\')', 100); // scrolls every 100 milliseconds
}
</script>
</head>
<body onload="scrollElementById('tableData')">
<table>
<thead>
<tr>
<td>foo</td>
<td>bar</td>
</tr>
</thead>
<tbody id="tableData">
<tr>
<td> a </td>
<td> b 9.2 </td>
</tr>
<tr>
<td> 899 </td>
<td> c </td>
</tr>
<tr>
<td> 607 </td>
<td> c </td>
</tr>
<tr>
<td> 606 </td>
<td> c </td>
</tr>
<tr>
<td> 605 </td>
<td> b 2.1 </td>
</tr>
<tr>
<td> 604 </td>
<td> b 3.5 </td>
</tr>
<tr>
<td> 315 </td>
<td> c </td>
</tr>
<tr>
<td> 313 </td>
<td> c </td>
</tr>
<tr>
<td> 160 </td>
<td> d </td>
</tr>
<tr>
<td> 159 </td>
<td> d </td>
</tr>
<tr>
<td> 159 </td>
<td> d </td>
</tr>
<tr>
<td> 157 </td>
<td> d </td>
</tr>
<tr>
<td> 156 </td>
<td> d </td>
</tr>
<tr>
<td> 155 </td>
<td> d </td>
</tr>
<tr>
<td> 154 </td>
<td> d </td>
</tr>
<tr>
<td> 150 </td>
<td> d </td>
</tr>
<tr>
<td> 143 </td>
<td> d </td>
</tr>
<tr>
<td> 142 </td>
<td> d </td>
</tr>
<tr>
<td> 140 </td>
<td> c </td>
</tr>
<tr>
<td> 139 </td>
<td> d </td>
</tr>
<tr>
<td> 139 </td>
<td> d </td>
</tr>
<tr>
<td> 135 </td>
<td> d </td>
</tr>
<tr>
<td> 134 </td>
<td> d </td>
</tr>
<tr>
<td> 125 </td>
<td> d </td>
</tr>
<tr>
<td> 122 </td>
<td> d </td>
</tr>
<tr>
<td> 183 </td>
<td> b 0.1 </td>
</tr>
<tr>
<td> 179 </td>
<td> d </td>
</tr>
<tr>
<td> 177 </td>
<td> d </td>
</tr>
<tr>
<td> 174 </td>
<td> d </td>
</tr>
<tr>
<td> 172 </td>
<td> b 2.0 </td>
</tr>
<tr>
<td> 172 </td>
<td> c </td>
</tr>
<tr>
<td> 165 </td>
<td> d </td>
</tr>
<tr>
<td> 119 </td>
<td> c </td>
</tr>
<tr>
<td> 103 </td>
<td> c </td>
</tr>
<tr>
<td> 102 </td>
<td> c </td>
</tr>
<tr>
<td> 102 </td>
<td> c </td>
</tr>
</tbody>
</table>
</body>
</html>
CSS：
* {
margin: 0;
padding: 0;
}
html,body {
height: 100%
}
tr {
height: 2em;
}
table {
background-color: red;
}
html {
background-color: blue;
}
答案 0 :(得分：-1)
<强>已更新
添加以下CSS规则将在Chrome，Opera和Safari中产生预期效果，但在Internet Explorer和Firefox上则不会。您需要使用额外的解决方法（例如，使用JavaScript动态修复表的高度）来处理这些浏览器：
table {
background-color: red;
height: 100%;
}
table thead {
display: inline-block;
width: 100%;
height: 20px;
}
table tbody {
height: 100%;
display: inline-block;
width: 100%;
overflow-x: hidden;
overflow-y: scroll;
}