保持固定标题的水平滚动位置与正文同步
所以我有一个网页，本质上是一个表格视图。表格的主体可以水平和垂直滚动，但标题应始终保持在顶部并且仅水平滚动（以匹配主体的位置）。
我当前的解决方案是将标题和正文保留在单独的div中，标题具有overflow-x：auto和overflow-y：隐藏，正文具有overflow：auto。
然后我有 JS 代码来监视“滚动”事件，这样我就可以以编程方式更新水平滚动位置。
它可以工作，但它很丑陋，有时会有一点延迟，滚动正文后标题不会立即更新位置。
我查看了类似问题的答案，但没有找到更好的答案来解决水平滚动问题。
我对任何框架或第三方解决方案都不感兴趣。谢谢！
如何让桌子的主体滚动但保持其头部固定在适当的位置？
三国纷争浏览 111回答 1
1回答
-
慕标琳琳
非常简单：<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>
随时随地看视频慕课网APP
相关分类
JavaScript