Question

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

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

<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;
}

Answer 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），您甚至可以使用transform / translate translate3d属性更新排名。

如果您的容器不是窗口，则必须依赖DOMElement.scrollLeft属性。快乐的编码！

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

1 个答案: