【发布时间】：2017-01-02 19:07:25
【问题描述】：
我正在尝试将表格高度设置为 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;
}
【问题讨论】：
-
我不知道你想做什么：jsfiddle.net/wfVL3
-
jsfiddle.net/kheema/LDv9s这是你想要的吗？
-
我想要jsfiddle.net/kheema/LDv9s，但表格高度为 100%。在示例表中是固定高度。
标签： html css scroll html-table