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

Question

所以我有一个基本上是表格视图的网页。 表格的主体可以水平和垂直滚动，但标题应始终位于顶部并且只能水平滚动（以匹配主体的位置）。

我目前的解决方案是将标题和正文保留在单独的 div 中，标题具有溢出-x：自动和溢出-y：隐藏，正文具有溢出：自动。

然后我有 JS 代码来观察“滚动”事件，这样我就可以以编程方式更新水平滚动位置。

它有效，但它很难看，有时会有一点延迟，滚动正文后，标题不会立即更新位置。

我看过类似问题的答案，但我还没有找到解决水平滚动问题的更好答案。

我对任何框架或 3rd 方解决方案不感兴趣。 谢谢！

如何让桌子的身体滚动但保持其头部固定到位？

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>