所以我有一个网页，本质上是一个表格视图。表格的主体可以水平和垂直滚动，但标题应始终保持在顶部并且仅水平滚动（以匹配主体的位置）。我当前的解决方案是将标题和正文保留在单独的div中，标题具有overflow-x：auto和overflow-y：隐藏，正文具有overflow：auto。然后我有 JS 代码来监视“滚动”事件，这样我就可以以编程方式更新水平滚动位置。它可以工作，但它很丑陋，有时会有一点延迟，滚动正文后标题不会立即更新位置。我查看了类似问题的答案，但没有找到更好的答案来解决水平滚动问题。我对任何框架或第三方解决方案都不感兴趣。谢谢！如何让桌子的主体滚动但保持其头部固定在适当的位置？
1 回答
慕标琳琳
TA贡献1830条经验 获得超9个赞
非常简单：
<th>的样式设置为sticky，
top: 0粘在顶部，并
background-color: white“隐藏”滚动行。
nowrap用于水平效果（非必需）。
th {
position: sticky;
top: 0;
background-color: white;
}
<table border="1">
<tr>
<th>sticky blah blah blah sticky </th>
<th>sticky blah blah blah sticky </th>
<th>sticky blah blah blah sticky </th>
<th>sticky blah blah blah sticky </th>
<th>sticky blah blah blah sticky </th>
<th>sticky blah blah blah sticky </th>
<th>sticky blah blah blah sticky </th>
<th>sticky blah blah blah sticky </th>
<th>sticky blah blah blah sticky </th>
</tr>
<tr>
<td nowrap>normal blah blah blah normal 01</td>
<td nowrap>normal blah blah blah normal </td>
<td nowrap>normal blah blah blah normal </td>
<td nowrap>normal blah blah blah normal </td>
<td nowrap>normal blah blah blah normal </td>
<td nowrap>normal blah blah blah normal </td>
<td nowrap>normal blah blah blah normal </td>
<td nowrap>normal blah blah blah normal </td>
<td nowrap>normal blah blah blah normal </td>
</tr>
<tr>
<td>normal blah blah blah normal 02</td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
</tr>
<tr>
<td>normal blah blah blah normal 03</td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
</tr>
<tr>
<td>normal blah blah blah normal 04</td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
</tr>
<tr>
<td>normal blah blah blah normal 05</td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
</tr>
<tr>
<td>normal blah blah blah normal 06</td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
</tr>
<tr>
<td>normal blah blah blah normal 07</td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
</tr>
<tr>
<td>normal blah blah blah normal 08</td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
</tr>
<tr>
<td>normal blah blah blah normal 09</td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
</tr>
<tr>
<td>normal blah blah blah normal 10</td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
</tr>
<tr>
<td>normal blah blah blah normal 11</td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
</tr>
<tr>
<td>normal blah blah blah normal 12</td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
</tr>
<tr>
<td>normal blah blah blah normal 13</td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
</tr>
<tr>
<td>normal blah blah blah normal 14</td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
</tr>
<tr>
<td>normal blah blah blah normal 15</td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
</tr>
<tr>
<td>normal blah blah blah normal 16</td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
</tr>
<tr>
<td>normal blah blah blah normal 17</td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
</tr>
<tr>
<td>normal blah blah blah normal 18</td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
</tr>
<tr>
<td>normal blah blah blah normal 19</td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
</tr>
<tr>
<td>normal blah blah blah normal 20</td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
</tr>
<tr>
<td>normal blah blah blah normal 21</td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
</tr>
<tr>
<td>normal blah blah blah normal 22</td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
</tr>
<tr>
<td>normal blah blah blah normal 23</td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
</tr>
<tr>
<td>normal blah blah blah normal 24</td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
</tr>
<tr>
<td>normal blah blah blah normal 25</td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
</tr>
<tr>
<td>normal blah blah blah normal 26</td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
</tr>
<tr>
<td>normal blah blah blah normal 27</td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
</tr>
<tr>
<td>normal blah blah blah normal 28</td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
</tr>
<tr>
<td>normal blah blah blah normal 29</td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
</tr>
<tr>
<td>normal blah blah blah normal 30</td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
</tr>
<tr>
<td>normal blah blah blah normal 31</td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
</tr>
<tr>
<td>normal blah blah blah normal 32</td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
</tr>
<tr>
<td>normal blah blah blah normal 33</td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
</tr>
<tr>
<td>normal blah blah blah normal 34</td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
</tr>
<tr>
<td>normal blah blah blah normal 35</td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
</tr>
<tr>
<td>normal blah blah blah normal 36</td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
</tr>
<tr>
<td>normal blah blah blah normal 37</td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
</tr>
<tr>
<td>normal blah blah blah normal 38</td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
</tr>
<tr>
<td>normal blah blah blah normal 39</td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
</tr>
<tr>
<td>normal blah blah blah normal 40</td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
</tr>
</table>
添加回答
举报
0/150
提交
取消