如何使固定表头与 tbody 数据同步水平滚动？答案

【问题标题】：How to make fixed table header scroll horizontally in sync with tbody data?如何使固定表头与 tbody 数据同步水平滚动？
【发布时间】：2015-04-24 00:17:25
【问题描述】：

我有一个带有固定标题的下表。我希望标题可以与数据水平滚动不同步？这样当用户水平滚动 tbody 数据时，标题也会水平滚动。有可能吗？

注意：我将动态创建表格列和标题.. 所以有时我只能有 2 列有时 10 列有 10 个标题

Fiddle code

<table border="1">
    <thead>
        <tr>
            <th>head1</th>
            <th>head2</th>
            <th>head3</th>
            <th>head4</th>
              <th>head4</th>
        </tr>
    </thead>
    <tbody>
        <tr>

            <td>row 1, cell 1</td>
            <td>row 1, cell 2</td>
            <td>row 1, cell 2</td>
            <td>row 1, cell 2</td>
             <td>row 1, cell 2</td>
        </tr>
        <tr>
            <td>row 2, cell 1</td>
            <td>row 2, cell 2</td>
            <td>row 1, cell 2</td>
            <td>row 1, cell 2</td>
             <td>row 1, cell 2</td>
        </tr>
         <tr>
            <td>row 2, cell 1</td>
            <td>row 2, cell 2</td>
            <td>row 1, cell 2</td>
            <td>row 1, cell 2</td>
              <td>row 1, cell 2</td>
        </tr>
         <tr>
            <td>row 2, cell 1</td>
            <td>row 2, cell 2</td>
            <td>row 1, cell 2</td>
            <td>row 1, cell 2</td>
             <td>row 1, cell 2</td>
        </tr>
    </tbody>
</table>

table tbody
{
    display: block;
}
table thead
{
    display: block;
    overflow:auto;
}

table tbody 
{
   overflow: auto;
   height: 100px;
   position:absolute;
}

th
{
    width: 72px;
}

【问题讨论】：

请写一些代码来做到这一点
@Ejay-已经发布了代码并且也在小提琴链接中
我想你想要一个叫做“sticky table header”的东西，最简单的实现方法是使用jQuery插件：fixedheadertable.com

标签： jquery css

【解决方案1】：

同步它们的唯一方法是监听scroll 事件，并相应地更新标题位置。像这样的东西（假设window 是容器）：

var headerEl = document.getElementById('yourHeadElement'); // or w/e
window.addEventListener('scroll', function(e){
    var offset = window.pageXOffset;
    headerEl.style.marginLeft = (-offset) + 'px';
    // alternatively:
    // headerEl.style.transform = 'translate3d('+ (-offset) +'px,0,0);';
}, false);

注意：如果您愿意（而不是 marginLeft），您甚至可以使用 translate/translate3d 更新 transform 属性的位置。

如果您的容器不是窗口，您将不得不依赖DOMElement.scrollLeft 属性。编码愉快！

【讨论】：