保持固定标题的水平滚动位置与正文同步

Question

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

Answer 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>