我有一张大桌子，大约有 300 行和 12 列。在通过页面翻页滚动表格时<thead>，默认情况下不显示内容。我想在滚动 "within" 时看到它<tbody>。也就是说，如果屏幕顶部以一行开头，我希望首先显示标题。否则它应该表现得像一个普通的表。
到目前为止，我看到的常见解决方案是创建一个可以自行滚动的表格（因此独立于页面滚动）。也就
我有一张大桌子，大约有 300 行和 12 列。在通过页面翻页滚动表格时<thead>，默认情况下不显示内容。我想在滚动 "within" 时看到它<tbody>。也就是说，如果屏幕顶部以一行开头，我希望首先显示标题。否则它应该表现得像一个普通的表。
到目前为止，我看到的常见解决方案是创建一个可以自行滚动的表格（因此独立于页面滚动）。也就是说，这个问题的答案表明了什么。
但是，如果屏幕上有很多列，这不是很实用，特别是因为现在有两个独立的滚动条。在移动设备上，第二个滚动条占用了大量宝贵的空间。而且使用起来也很烦人。你不能简单地“离开”，但你必须集中精力点击那个微小的滚动条。在其他浏览器上，您可以滚动触摸其中的数据，但是一旦您移到外面，就会发生另一个令人讨厌的动作……
有没有一种干净的 CSS 方法来做到这一点？
如果你：
根据需要创建尽可能长和宽的表格，无需标题。用您的表头创建了另一个表。将您的标题表放在一个单独的 DIV 中并将其浮动在您的数据表上（z-index + position:absolute）。使用 JQuery，在窗口加载、调整大小、滚动或任何相关事件时，您可以重置每个 TH 宽度以匹配其对应的 TD。您还可以在滚动时重新定位表头 DIV。这应该有效。如果你需要一个例子，请告诉我。这样，您应该只在需要时才能看到浏览器滚动条。
祝你好运。
希望position:sticky有朝一日会成为这个问题的最终答案（请参阅此处的公告），就像上面评论中提到的那样，我仍然着迷于制作一个没有双滚动条的简单 HTML/CSS 概念验证。
我的简单解决方案——并不意味着是一个完美的解决方案，更像是一个练习——没有脚本：
这可能会帮助您：
HTML
<!-- IE < 10 does not like giving a tbody a height. The workaround here applies the scrolling to a wrapped <div>. -->
<!--[if lte IE 9]>
<div class="old_ie_wrapper">
<!--<![endif]-->
<table class="fixed_headers">
<thead>
<tr>
<th>Name</th>
<th>Color</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>Apple</td>
<td>Red</td>
<td>These are red.</td>
</tr>
<tr>
<td>Pear</td>
<td>Green</td>
<td>These are green.</td>
</tr>
<tr>
<td>Grape</td>
<td>Purple / Green</td>
<td>These are purple and green.</td>
</tr>
<tr>
<td>Orange</td>
<td>Orange</td>
<td>These are orange.</td>
</tr>
<tr>
<td>Banana</td>
<td>Yellow</td>
<td>These are yellow.</td>
</tr>
<tr>
<td>Kiwi</td>
<td>Green</td>
<td>These are green.</td>
</tr>
<tr>
<td>Plum</td>
<td>Purple</td>
<td>These are Purple</td>
</tr>
<tr>
<td>Watermelon</td>
<td>Red</td>
<td>These are red.</td>
</tr>
<tr>
<td>Tomato</td>
<td>Red</td>
<td>These are red.</td>
</tr>
<tr>
<td>Cherry</td>
<td>Red</td>
<td>These are red.</td>
</tr>
<tr>
<td>Cantelope</td>
<td>Orange</td>
<td>These are orange inside.</td>
</tr>
<tr>
<td>Honeydew</td>
<td>Green</td>
<td>These are green inside.</td>
</tr>
<tr>
<td>Papaya</td>
<td>Green</td>
<td>These are green.</td>
</tr>
<tr>
<td>Raspberry</td>
<td>Red</td>
<td>These are red.</td>
</tr>
<tr>
<td>Blueberry</td>
<td>Blue</td>
<td>These are blue.</td>
</tr>
<tr>
<td>Mango</td>
<td>Orange</td>
<td>These are orange.</td>
</tr>
<tr>
<td>Passion Fruit</td>
<td>Green</td>
<td>These are green.</td>
</tr>
</tbody>
</table>
<!--[if lte IE 9]>
</div>
<!--<![endif]-->
CSS
.fixed_headers {
width: 750px;
table-layout: fixed;
border-collapse: collapse;
}
.fixed_headers th {
text-decoration: underline;
}
.fixed_headers th,.fixed_headers td {
padding: 5px;
text-align: left;
}
.fixed_headers td:nth-child(1),.fixed_headers th:nth-child(1) {
min-width: 200px;
}
.fixed_headers td:nth-child(2),.fixed_headers th:nth-child(2) {
min-width: 200px;
}
.fixed_headers td:nth-child(3),.fixed_headers th:nth-child(3) {
width: 350px;
}
.fixed_headers thead {
background-color: #333333;
color: #fdfdfd;
}
.fixed_headers thead tr {
display: block;
position: relative;
}
.fixed_headers tbody {
display: block;
overflow: auto;
width: 100%;
height: 300px;
}
.fixed_headers tbody tr:nth-child(even) {
background-color: #dddddd;
}
.old_ie_wrapper {
height: 300px;
width: 750px;
overflow-x: hidden;
overflow-y: auto;
}
.old_ie_wrapper tbody {
height: auto;
}
如果你：
根据需要创建尽可能长和宽的表格，无需标题。用您的表头创建了另一个表。将您的标题表放在一个单独的 DIV 中并将其浮动在您的数据表上（z-index + position:absolute）。使用 JQuery，在窗口加载、调整大小、滚动或任何相关事件时，您可以重置每个 TH 宽度以匹配其对应的 TD。您还可以在滚动时重新定位表头 DIV。这应该有效。如果你需要一个例子，请告诉我。这样，您应该只在需要时才能看到浏览器滚动条。
祝你好运。
您可以使用该插件，它工作正常： http ://web-gladiator.com/stickythead/