我正在尝试创建一个页面来仅滚动表格内容，即表格标题不随内容移动。
看起来很不错，除了它有一个恼人的水平滚动条（在所有现代浏览器中）。
代码在这里
div.title {
position: absolute;
top: 0px;
height: 97px;
width:100%;
}
div.tableHeader {
position: absolute;
top: 98px;
height: 23px;
overflow-y: scroll;
width:100%;
}
div.tableBody {
position: absolute;
top: 128px;
bottom: 0px;
width:100%;
overflow-x: auto;
overflow-y: scroll;
}
table.fixedHeader {
width: 100%;
text-align: left;
}
table.fixedHeader thead {
height: 21px;
background-color: #BFC2CC;
}
table.fixedHeader tr:nth-child(even) {
background-color: #ddd;
}
table.fixedHeader th:nth-child(1), table.fixedHeader td:nth-child(1) {
width: 250px;
}
table.fixedHeader th:nth-child(2), table.fixedHeader td:nth-child(2) {
width: 100px;
}
table.fixedHeader th:nth-child(3), table.fixedHeader th:nth-child(4), table.fixedHeader td:nth-child(3), table.fixedHeader td:nth-child(4) {
width: 60px;
}
table.fixedHeader th:nth-child(5), table.fixedHeader th:nth-child(6), table.fixedHeader th:nth-child(7), table.fixedHeader td:nth-child(5), table.fixedHeader td:nth-child(6), table.fixedHeader td:nth-child(7) {
width: 120px;
}
table.fixedHeader th:nth-child(8), table.fixedHeader td:nth-child(8) {
width: 80px;
}<body>
<div class="title">
<h1> Demo how to set fixed table header</h1>
</div>
<div class="tableHeader">
<table class="fixedHeader">
<thead>
<tr>
<th>head1</th>
<th>head2</th>
<th>head3</th>
<th>head4</th>
<th>head5</th>
<th>head6</th>
<th>head7</th>
<th>head8</th>
</tr>
</thead>
</table>
</div>
<div class="tableBody">
<table class="fixedHeader">
<tr>
<td>Text 1111</td>
<td>Text Text</td>
<td>3333</td>
<td>4444</td>
<td>Text Text</td>
<td>Text Text</td>
<td>Text Text</td>
<td>Text Text</td>
</tr>
<tr>
<td>Text 2222</td>
<td>Text Text</td>
<td>3333</td>
<td>4444</td>
<td>Text Text</td>
<td>Text Text</td>
<td>Text Text</td>
<td>Text Text</td>
</tr>
<tr>
<td>Text 3333</td>
<td>Text Text</td>
<td>3333</td>
<td>4444</td>
<td>Text Text</td>
<td>Text Text</td>
<td>Text Text</td>
<td>Text Text</td>
</tr>
<tr>
<td>Text 4444</td>
<td>Text Text</td>
<td>3333</td>
<td>4444</td>
<td>Text Text</td>
<td>Text Text</td>
<td>Text Text</td>
<td>Text Text</td>
</tr>
<tr>
<td>Text 5555</td>
<td>Text Text</td>
<td>Text Text</td>
<td>Text Text</td>
<td>Text Text</td>
<td>Text Text</td>
<td>Text Text</td>
<td>Text Text</td>
</tr>
<tr>
<td>Text 6666</td>
<td>Text Text</td>
<td>Text Text</td>
<td>Text Text</td>
<td>Text Text</td>
<td>Text Text</td>
<td>Text Text</td>
<td>Text Text</td>
</tr>
<tr>
<td>Text 7777</td>
<td>Text Text</td>
<td>Text Text</td>
<td>Text Text</td>
<td>Text Text</td>
<td>Text Text</td>
<td>Text Text</td>
<td>Text Text</td>
</tr>
<tr>
<td>Text 8888</td>
<td>Text Text</td>
<td>Text Text</td>
<td>Text Text</td>
<td>Text Text</td>
<td>Text Text</td>
<td>Text Text</td>
<td>Text Text</td>
</tr>
<tr>
<td>Text 9999</td>
<td>Text Text</td>
<td>Text Text</td>
<td>Text Text</td>
<td>Text Text</td>
<td>Text Text</td>
<td>Text Text</td>
<td>Text Text</td>
</tr>
<tr>
<td>Text aaaa</td>
<td>Text Text</td>
<td>Text Text</td>
<td>Text Text</td>
<td>Text Text</td>
<td>Text Text</td>
<td>Text Text</td>
<td>Text Text</td>
</tr>
<tr>
<td>Even More Text Text</td>
<td>Even More Text Text</td>
<td>Even More Text Text</td>
<td>Even More Text Text</td>
<td>Even More Text Text</td>
<td>Even More Text Text</td>
<td>Even More Text Text</td>
<td>Even More Text Text</td>
</tr>
<tr>
<td>Even More Text Text</td>
<td>Even More Text Text</td>
<td>Even More Text Text</td>
<td>Even More Text Text</td>
<td>Even More Text Text</td>
<td>Even More Text Text</td>
<td>Even More Text Text</td>
<td>Even More Text Text</td>
</tr>
<tr>
<td>Even More Text Text</td>
<td>Even More Text Text</td>
<td>Even More Text Text</td>
<td>Even More Text Text</td>
<td>Even More Text Text</td>
<td>Even More Text Text</td>
<td>Even More Text Text</td>
<td>Even More Text Text</td>
</tr>
<tr>
<td>Even More Text Text</td>
<td>Even More Text Text</td>
<td>Even More Text Text</td>
<td>Even More Text Text</td>
<td>Even More Text Text</td>
<td>Even More Text Text</td>
<td>Even More Text Text</td>
<td>Even More Text Text</td>
</tr>
<tr>
<td>Even More Text Text</td>
<td>Even More Text Text</td>
<td>Even More Text Text</td>
<td>Even More Text Text</td>
<td>Even More Text Text</td>
<td>Even More Text Text</td>
<td>Even More Text Text</td>
<td>Even More Text Text</td>
</tr>
<tr>
<td>Even More Text Text</td>
<td>Even More Text Text</td>
<td>Even More Text Text</td>
<td>Even More Text Text</td>
<td>Even More Text Text</td>
<td>Even More Text Text</td>
<td>Even More Text Text</td>
<td>Even More Text Text</td>
</tr>
<tr>
<td>Even More Text Text</td>
<td>Even More Text Text</td>
<td>Even More Text Text</td>
<td>Even More Text Text</td>
<td>Even More Text Text</td>
<td>Even More Text Text</td>
<td>Even More Text Text</td>
<td>Even More Text Text</td>
</tr>
<tr>
<td>Text aaaa</td>
<td>Text Text</td>
<td>Text Text</td>
<td>Text Text</td>
<td>Text Text</td>
<td>Text Text</td>
<td>Text Text</td>
<td>Text Text</td>
</tr>
<tr>
<td>Text bbbb</td>
<td>Text Text</td>
<td>Text Text</td>
<td>Text Text</td>
<td>Text Text</td>
<td>Text Text</td>
<td>Text Text</td>
<td>Text Text</td>
</tr>
<tr>
<td>Even More Text Text</td>
<td>Even More Text Text</td>
<td>Even More Text Text</td>
<td>Even More Text Text</td>
<td>Even More Text Text</td>
<td>Even More Text Text</td>
<td>Even More Text Text</td>
<td>Even More Text Text</td>
</tr>
<tr>
<td>Text cccc</td>
<td>Text Text</td>
<td>Text Text</td>
<td>Text Text</td>
<td>Text Text</td>
<td>Text Text</td>
<td>Text Text</td>
<td>Text Text</td>
</tr>
<tr>
<td>Even More Text Text</td>
<td>Even More Text Text</td>
<td>Even More Text Text</td>
<td>Even More Text Text</td>
<td>Even More Text Text</td>
<td>Even More Text Text</td>
<td>Even More Text Text</td>
<td>Even More Text Text</td>
</tr>
<tr>
<td>Text dddd</td>
<td>Text Text</td>
<td>Text Text</td>
<td>Text Text</td>
<td>Text Text</td>
<td>Text Text</td>
<td>Text Text</td>
<td>Text Text</td>
</tr>
<tr>
<td>Even More Text Text</td>
<td>Even More Text Text</td>
<td>Even More Text Text</td>
<td>Even More Text Text</td>
<td>Even More Text Text</td>
<td>Even More Text Text</td>
<td>Even More Text Text</td>
<td>Even More Text Text</td>
</tr>
<tr>
<td>Text eeee</td>
<td>Text Text</td>
<td>Text Text</td>
<td>Text Text</td>
<td>Text Text</td>
<td>Text Text</td>
<td>Text Text</td>
<td>Text Text</td>
</tr>
<tr>
<td>Text ffff</td>
<td>Text Text</td>
<td>Text Text</td>
<td>Text Text</td>
<td>Text Text</td>
<td>Text Text</td>
<td>Text Text</td>
<td>Text Text</td>
</tr>
<tr>
<td>Text gggg</td>
<td>Text Text</td>
<td>Text Text</td>
<td>Text Text</td>
<td>Text Text</td>
<td>Text Text</td>
<td>Text Text</td>
<td>Text Text</td>
</tr>
<tr>
<td>Text hhhh</td>
<td>Text Text</td>
<td>Text Text</td>
<td>Text Text</td>
<td>Text Text</td>
<td>Text Text</td>
<td>Text Text</td>
<td>Text Text</td>
</tr>
<tr>
<td>Text iiii</td>
<td>Text Text</td>
<td>Text Text</td>
<td>Text Text</td>
<td>Text Text</td>
<td>Text Text</td>
<td>Text Text</td>
<td>Text Text</td>
</tr>
</table>
</div>
</body>
答案 0 :(得分：1)
添加重置样式表或设置body { margin: 0; }以避免隐藏任何overflow.
答案 1 :(得分：0)
尝试添加CSS overflow-x：hidden;到桌子。
答案 2 :(得分：0)
实际上，您需要将overflow-y: hidden;添加到.tableHeader div
这里是更新的小提琴http://jsfiddle.net/gcfurtqs/4/