向下滚动 html 表格时不要滚动表格标题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8235169/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Do not scroll table headings when scrolling down a html table
提问by BruceyBandit
Richard JP Le Guen kindly provided me help when it comes to creating a scrolling html table. The only problem is that I don't want the table headings to scroll with the table rows. Now it worked in his example using span but if I use it in my table it really messes up my table headings. I have been for the last 2 hours try to get it sorted but I havn't so I have just left the table headings as it was.
在创建滚动 html 表时，Richard JP Le Guen 为我提供了帮助。唯一的问题是我不希望表格标题随表格行一起滚动。现在它在他的示例中使用 span 起作用，但是如果我在我的表格中使用它，它真的会弄乱我的表格标题。在过去的 2 个小时里，我一直试图对其进行排序，但我没有，所以我只是将表格标题保留为原样。
So what question is that is there another way to be able to use css to make sure that table headings cannot be scrolled while scrolling down a table?
那么问题是有没有另一种方法可以使用 css 来确保在向下滚动表格时不能滚动表格标题？
Below is my html and css code:
下面是我的 html 和 css 代码：
<div id="tableWrapper">
<div id="tableScroll">
<table border=1 id="qandatbl" align="center">
<thead>
<tr>
<th class="col1">Question No</th>
<th class="col2">Option Type</th>
<th class="col1">Duration</th>
<th class="col2">Weight(%)</th>
<th class="col1">Answer</th>
<th class="col2">Video</th>
<th class="col1">Audio</th>
<th class="col2">Image</th>
</tr>
</thead>
<tbody>
<tr>
<td class="qid"><?php echo $i; ?></td>
<td class="options"></td>
<td class="duration"></td>
<td class="weight"></td>
<td class="answer"></td>
<td class="video"></td>
<td class="audio"></td>
<td class="image"></td>
</tr>
</tbody>
</table>
</div>
</div>
#qandatbl{
font-size:12px;
border-collapse:collapse;
margin:0px;
text-align:center;
margin-left:auto;
margin-right:auto;
border:1px solid black;
}
.col1{
background-color:#FCF6CF;
}
.col2{
background-color:#FEFEF2;
}
.options{
overflow:hidden;
max-width:125px;
min-width:125px;
background-color:#FCF6CF;
border:1px solid black;
}
.duration{
overflow:hidden;
max-width:125px;
min-width:125px;
background-color:#FEFEF2;
border:1px solid black;
}
.weight{
overflow:hidden;
max-width:125px;
min-width:125px;
background-color:#FCF6CF;
border:1px solid black;
}
.answer{
overflow:hidden;
max-width:125px;
min-width:125px;
background-color:#FEFEF2;
border:1px solid black;
}
.qid{
overflow:hidden;
max-width:125px;
min-width:125px;
background-color:#FEFEF2;
border:1px solid black;
}
.video{
overflow:hidden;
max-width:350px;
min-width:350px;
background-color:#FCF6CF;
border:1px solid black;
}
.audio{
overflow:hidden;
max-width:350px;
min-width:350px;
background-color:#FEFEF2;
border:1px solid black;
}
.image{
overflow:hidden;
max-width:350px;
min-width:350px;
background-color:#FCF6CF;
border:1px solid black;
}
#tableWrapper {
position:relative;
}
#tableScroll {
height:350px;
overflow:auto;
margin-top:20px;
}
