隐藏列时表头文本消失

时间:2014-03-13 14:46:02

标签: javascript jquery

我在包装器里面有一个表。当用户滚动时,我需要列标题在顶部是静态的。我有那部分工作正常。

其他要求之一是可以显示或隐藏列,并且标题应该调整。这似乎与一个小错误有关:当用户滚动然后点击"隐藏列"时,标题文本正在消失。

你可以在这里找到小提琴:http://jsfiddle.net/joelkinzel/j3RtD/1/

HTML:

<style type="text/css">
    body{
        padding:0;
        margin:0;
    }
    .tablewrapper {
        height: 400px;
        margin:0 auto;
        overflow: auto;
        position: relative;
        width: 75%;
    }
    table {
        border-collapse: collapse;
        position: relative;
        width:100%;
        margin: 0 auto;
    }
    thead {
        background-color:#000;
        color:#fff;
        position: absolute;
        text-align: left;
        height:1.5em;
        top:0;
    }
    tbody > tr:first-child {
        border-top:1.5em solid transparent;
    }
</style>

    <h1> Floating Table Headers</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eu cursus ligula. In non rutrum mauris. Donec aliquet, urna at dignissim scelerisque, nunc libero adipiscing ante, ac luctus mauris est id felis. Nunc vel sagittis arcu. Maecenas quam tortor, congue vestibulum dolor quis, tempor blandit libero. Aenean et magna et massa malesuada auctor. Nunc nec justo quis nisl lobortis mattis. Etiam non ipsum ac quam gravida porta. Sed vitae malesuada magna. Nulla sed urna sed purus sodales vestibulum.</p>

    <button class="show-column" type="button">Show Column</button>
    <button class="hide-column" type="button">Hide Column</button>
<div class="tablewrapper">
<table>
    <thead>
        <tr>
            <th>Col 1</th>
            <th>Col 2</th>
            <th>Col 3</th>
            <th>Col 4</th>
            <th>Col 1</th>
            <th>Col 2</th>
            <th>Col 3</th>
            <th>Col 4</th>
            <th>Col 1</th>
            <th>Col 2</th>
            <th>Col 3</th>
            <th>Col 4</th>
            <th>Col 1</th>
            <th>Col 2</th>
            <th>Col 3</th>
            <th>Col 4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
        </tr>
        <tr>
            <td>Uno</td>
            <td>Dos</td>
            <td>Tres</td>
            <td>Quatro</td>
            <td>Uno</td>
            <td>Dos</td>
            <td>Tres</td>
            <td>Quatro</td>
            <td>Uno</td>
            <td>Dos</td>
            <td>Tres</td>
            <td>Quatro</td>
            <td>Uno</td>
            <td>Dos</td>
            <td>Tres</td>
            <td>Quatro</td>
        </tr>
        <tr>
            <td>Ein</td>
            <td>Swei</td>
            <td>Drei</td>
            <td>Fier</td>
            <td>Ein</td>
            <td>Swei</td>
            <td>Drei</td>
            <td>Fier</td>
            <td>Ein</td>
            <td>Swei</td>
            <td>Drei</td>
            <td>Fier</td>
            <td>Ein</td>
            <td>Swei</td>
            <td>Drei</td>
            <td>Fier</td>
        </tr>
        <tr>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
        </tr>
        <tr>
            <td>Uno</td>
            <td>Dos</td>
            <td>Tres</td>
            <td>Quatro</td>
            <td>Uno</td>
            <td>Dos</td>
            <td>Tres</td>
            <td>Quatro</td>
            <td>Uno</td>
            <td>Dos</td>
            <td>Tres</td>
            <td>Quatro</td>
            <td>Uno</td>
            <td>Dos</td>
            <td>Tres</td>
            <td>Quatro</td>
        </tr>
        <tr>
            <td>Ein</td>
            <td>Swei</td>
            <td>Drei</td>
            <td>Fier</td>
            <td>Ein</td>
            <td>Swei</td>
            <td>Drei</td>
            <td>Fier</td>
            <td>Ein</td>
            <td>Swei</td>
            <td>Drei</td>
            <td>Fier</td>
            <td>Ein</td>
            <td>Swei</td>
            <td>Drei</td>
            <td>Fier</td>
        </tr>
        <tr>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
        </tr>
        <tr>
            <td>Uno</td>
            <td>Dos</td>
            <td>Tres</td>
            <td>Quatro</td>
            <td>Uno</td>
            <td>Dos</td>
            <td>Tres</td>
            <td>Quatro</td>
            <td>Uno</td>
            <td>Dos</td>
            <td>Tres</td>
            <td>Quatro</td>
            <td>Uno</td>
            <td>Dos</td>
            <td>Tres</td>
            <td>Quatro</td>
        </tr>
        <tr>
            <td>Ein</td>
            <td>Swei</td>
            <td>Drei</td>
            <td>Fier</td>
            <td>Ein</td>
            <td>Swei</td>
            <td>Drei</td>
            <td>Fier</td>
            <td>Ein</td>
            <td>Swei</td>
            <td>Drei</td>
            <td>Fier</td>
            <td>Ein</td>
            <td>Swei</td>
            <td>Drei</td>
            <td>Fier</td>
        </tr>
        <tr>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
        </tr>
        <tr>
            <td>Uno</td>
            <td>Dos</td>
            <td>Tres</td>
            <td>Quatro</td>
            <td>Uno</td>
            <td>Dos</td>
            <td>Tres</td>
            <td>Quatro</td>
            <td>Uno</td>
            <td>Dos</td>
            <td>Tres</td>
            <td>Quatro</td>
            <td>Uno</td>
            <td>Dos</td>
            <td>Tres</td>
            <td>Quatro</td>
        </tr>
        <tr>
            <td>Ein</td>
            <td>Swei</td>
            <td>Drei</td>
            <td>Fier</td>
            <td>Ein</td>
            <td>Swei</td>
            <td>Drei</td>
            <td>Fier</td>
            <td>Ein</td>
            <td>Swei</td>
            <td>Drei</td>
            <td>Fier</td>
            <td>Ein</td>
            <td>Swei</td>
            <td>Drei</td>
            <td>Fier</td>
        </tr>
        <tr>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
        </tr>
        <tr>
            <td>Uno</td>
            <td>Dos</td>
            <td>Tres</td>
            <td>Quatro</td>
            <td>Uno</td>
            <td>Dos</td>
            <td>Tres</td>
            <td>Quatro</td>
            <td>Uno</td>
            <td>Dos</td>
            <td>Tres</td>
            <td>Quatro</td>
            <td>Uno</td>
            <td>Dos</td>
            <td>Tres</td>
            <td>Quatro</td>
        </tr>
        <tr>
            <td>Ein</td>
            <td>Swei</td>
            <td>Drei</td>
            <td>Fier</td>
            <td>Ein</td>
            <td>Swei</td>
            <td>Drei</td>
            <td>Fier</td>
            <td>Ein</td>
            <td>Swei</td>
            <td>Drei</td>
            <td>Fier</td>
            <td>Ein</td>
            <td>Swei</td>
            <td>Drei</td>
            <td>Fier</td>
        </tr>
        <tr>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
        </tr>
        <tr>
            <td>Uno</td>
            <td>Dos</td>
            <td>Tres</td>
            <td>Quatro</td>
            <td>Uno</td>
            <td>Dos</td>
            <td>Tres</td>
            <td>Quatro</td>
            <td>Uno</td>
            <td>Dos</td>
            <td>Tres</td>
            <td>Quatro</td>
            <td>Uno</td>
            <td>Dos</td>
            <td>Tres</td>
            <td>Quatro</td>
        </tr>
        <tr>
            <td>Ein</td>
            <td>Swei</td>
            <td>Drei</td>
            <td>Fier</td>
            <td>Ein</td>
            <td>Swei</td>
            <td>Drei</td>
            <td>Fier</td>
            <td>Ein</td>
            <td>Swei</td>
            <td>Drei</td>
            <td>Fier</td>
            <td>Ein</td>
            <td>Swei</td>
            <td>Drei</td>
            <td>Fier</td>
        </tr>
        <tr>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
        </tr>
        <tr>
            <td>Uno</td>
            <td>Dos</td>
            <td>Tres</td>
            <td>Quatro</td>
            <td>Uno</td>
            <td>Dos</td>
            <td>Tres</td>
            <td>Quatro</td>
            <td>Uno</td>
            <td>Dos</td>
            <td>Tres</td>
            <td>Quatro</td>
            <td>Uno</td>
            <td>Dos</td>
            <td>Tres</td>
            <td>Quatro</td>
        </tr>
        <tr>
            <td>Ein</td>
            <td>Swei</td>
            <td>Drei</td>
            <td>Fier</td>
            <td>Ein</td>
            <td>Swei</td>
            <td>Drei</td>
            <td>Fier</td>
            <td>Ein</td>
            <td>Swei</td>
            <td>Drei</td>
            <td>Fier</td>
            <td>Ein</td>
            <td>Swei</td>
            <td>Drei</td>
            <td>Fier</td>
        </tr>
        <tr>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
        </tr>
        <tr>
            <td>Uno</td>
            <td>Dos</td>
            <td>Tres</td>
            <td>Quatro</td>
            <td>Uno</td>
            <td>Dos</td>
            <td>Tres</td>
            <td>Quatro</td>
            <td>Uno</td>
            <td>Dos</td>
            <td>Tres</td>
            <td>Quatro</td>
            <td>Uno</td>
            <td>Dos</td>
            <td>Tres</td>
            <td>Quatro</td>
        </tr>
        <tr>
            <td>Ein</td>
            <td>Swei</td>
            <td>Drei</td>
            <td>Fier</td>
            <td>Ein</td>
            <td>Swei</td>
            <td>Drei</td>
            <td>Fier</td>
            <td>Ein</td>
            <td>Swei</td>
            <td>Drei</td>
            <td>Fier</td>
            <td>Ein</td>
            <td>Swei</td>
            <td>Drei</td>
            <td>Fier</td>
        </tr>
        <tr>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
        </tr>
        <tr>
            <td>Uno</td>
            <td>Dos</td>
            <td>Tres</td>
            <td>Quatro</td>
            <td>Uno</td>
            <td>Dos</td>
            <td>Tres</td>
            <td>Quatro</td>
            <td>Uno</td>
            <td>Dos</td>
            <td>Tres</td>
            <td>Quatro</td>
            <td>Uno</td>
            <td>Dos</td>
            <td>Tres</td>
            <td>Quatro</td>
        </tr>
        <tr>
            <td>Ein</td>
            <td>Swei</td>
            <td>Drei</td>
            <td>Fier</td>
            <td>Ein</td>
            <td>Swei</td>
            <td>Drei</td>
            <td>Fier</td>
            <td>Ein</td>
            <td>Swei</td>
            <td>Drei</td>
            <td>Fier</td>
            <td>Ein</td>
            <td>Swei</td>
            <td>Drei</td>
            <td>Fier</td>
        </tr>
        <tr>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
        </tr>
        <tr>
            <td>Uno</td>
            <td>Dos</td>
            <td>Tres</td>
            <td>Quatro</td>
            <td>Uno</td>
            <td>Dos</td>
            <td>Tres</td>
            <td>Quatro</td>
            <td>Uno</td>
            <td>Dos</td>
            <td>Tres</td>
            <td>Quatro</td>
            <td>Uno</td>
            <td>Dos</td>
            <td>Tres</td>
            <td>Quatro</td>
        </tr>
        <tr>
            <td>Ein</td>
            <td>Swei</td>
            <td>Drei</td>
            <td>Fier</td>
            <td>Ein</td>
            <td>Swei</td>
            <td>Drei</td>
            <td>Fier</td>
            <td>Ein</td>
            <td>Swei</td>
            <td>Drei</td>
            <td>Fier</td>
            <td>Ein</td>
            <td>Swei</td>
            <td>Drei</td>
            <td>Fier</td>
        </tr>
        <tr>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
        </tr>
        <tr>
            <td>Uno</td>
            <td>Dos</td>
            <td>Tres</td>
            <td>Quatro</td>
            <td>Uno</td>
            <td>Dos</td>
            <td>Tres</td>
            <td>Quatro</td>
            <td>Uno</td>
            <td>Dos</td>
            <td>Tres</td>
            <td>Quatro</td>
            <td>Uno</td>
            <td>Dos</td>
            <td>Tres</td>
            <td>Quatro</td>
        </tr>
        <tr>
            <td>Ein</td>
            <td>Swei</td>
            <td>Drei</td>
            <td>Fier</td>
            <td>Ein</td>
            <td>Swei</td>
            <td>Drei</td>
            <td>Fier</td>
            <td>Ein</td>
            <td>Swei</td>
            <td>Drei</td>
            <td>Fier</td>
            <td>Ein</td>
            <td>Swei</td>
            <td>Drei</td>
            <td>Fier</td>
        </tr>
        <tr>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
        </tr>
        <tr>
            <td>Uno</td>
            <td>Dos</td>
            <td>Tres</td>
            <td>Quatro</td>
            <td>Uno</td>
            <td>Dos</td>
            <td>Tres</td>
            <td>Quatro</td>
            <td>Uno</td>
            <td>Dos</td>
            <td>Tres</td>
            <td>Quatro</td>
            <td>Uno</td>
            <td>Dos</td>
            <td>Tres</td>
            <td>Quatro</td>
        </tr>
        <tr>
            <td>Ein</td>
            <td>Swei</td>
            <td>Drei</td>
            <td>Fier</td>
            <td>Ein</td>
            <td>Swei</td>
            <td>Drei</td>
            <td>Fier</td>
            <td>Ein</td>
            <td>Swei</td>
            <td>Drei</td>
            <td>Fier</td>
            <td>Ein</td>
            <td>Swei</td>
            <td>Drei</td>
            <td>Fier</td>
        </tr>
        <tr>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
        </tr>
        <tr>
            <td>Uno</td>
            <td>Dos</td>
            <td>Tres</td>
            <td>Quatro</td>
            <td>Uno</td>
            <td>Dos</td>
            <td>Tres</td>
            <td>Quatro</td>
            <td>Uno</td>
            <td>Dos</td>
            <td>Tres</td>
            <td>Quatro</td>
            <td>Uno</td>
            <td>Dos</td>
            <td>Tres</td>
            <td>Quatro</td>
        </tr>
        <tr>
            <td>Ein</td>
            <td>Swei</td>
            <td>Drei</td>
            <td>Fier</td>
            <td>Ein</td>
            <td>Swei</td>
            <td>Drei</td>
            <td>Fier</td>
            <td>Ein</td>
            <td>Swei</td>
            <td>Drei</td>
            <td>Fier</td>
            <td>Ein</td>
            <td>Swei</td>
            <td>Drei</td>
            <td>Fier</td>
        </tr>
        <tr>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
        </tr>
        <tr>
            <td>Uno</td>
            <td>Dos</td>
            <td>Tres</td>
            <td>Quatro</td>
            <td>Uno</td>
            <td>Dos</td>
            <td>Tres</td>
            <td>Quatro</td>
            <td>Uno</td>
            <td>Dos</td>
            <td>Tres</td>
            <td>Quatro</td>
            <td>Uno</td>
            <td>Dos</td>
            <td>Tres</td>
            <td>Quatro</td>
        </tr>
        <tr>
            <td>Ein</td>
            <td>Swei</td>
            <td>Drei</td>
            <td>Fier</td>
            <td>Ein</td>
            <td>Swei</td>
            <td>Drei</td>
            <td>Fier</td>
            <td>Ein</td>
            <td>Swei</td>
            <td>Drei</td>
            <td>Fier</td>
            <td>Ein</td>
            <td>Swei</td>
            <td>Drei</td>
            <td>Fier</td>
        </tr>
        <tr>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
        </tr>
        <tr>
            <td>Uno</td>
            <td>Dos</td>
            <td>Tres</td>
            <td>Quatro</td>
            <td>Uno</td>
            <td>Dos</td>
            <td>Tres</td>
            <td>Quatro</td>
            <td>Uno</td>
            <td>Dos</td>
            <td>Tres</td>
            <td>Quatro</td>
            <td>Uno</td>
            <td>Dos</td>
            <td>Tres</td>
            <td>Quatro</td>
        </tr>
        <tr>
            <td>Ein</td>
            <td>Swei</td>
            <td>Drei</td>
            <td>Fier</td>
            <td>Ein</td>
            <td>Swei</td>
            <td>Drei</td>
            <td>Fier</td>
            <td>Ein</td>
            <td>Swei</td>
            <td>Drei</td>
            <td>Fier</td>
            <td>Ein</td>
            <td>Swei</td>
            <td>Drei</td>
            <td>Fier</td>
        </tr>
        <tr>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
        </tr>
        <tr>
            <td>Uno</td>
            <td>Dos</td>
            <td>Tres</td>
            <td>Quatro</td>
            <td>Uno</td>
            <td>Dos</td>
            <td>Tres</td>
            <td>Quatro</td>
            <td>Uno</td>
            <td>Dos</td>
            <td>Tres</td>
            <td>Quatro</td>
            <td>Uno</td>
            <td>Dos</td>
            <td>Tres</td>
            <td>Quatro</td>
        </tr>
        <tr>
            <td>Ein</td>
            <td>Swei</td>
            <td>Drei</td>
            <td>Fier</td>
            <td>Ein</td>
            <td>Swei</td>
            <td>Drei</td>
            <td>Fier</td>
            <td>Ein</td>
            <td>Swei</td>
            <td>Drei</td>
            <td>Fier</td>
            <td>Ein</td>
            <td>Swei</td>
            <td>Drei</td>
            <td>Fier</td>
        </tr>
        <tr>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
        </tr>
        <tr>
            <td>Uno</td>
            <td>Dos</td>
            <td>Tres</td>
            <td>Quatro</td>
            <td>Uno</td>
            <td>Dos</td>
            <td>Tres</td>
            <td>Quatro</td>
            <td>Uno</td>
            <td>Dos</td>
            <td>Tres</td>
            <td>Quatro</td>
            <td>Uno</td>
            <td>Dos</td>
            <td>Tres</td>
            <td>Quatro</td>
        </tr>
        <tr>
            <td>Ein</td>
            <td>Swei</td>
            <td>Drei</td>
            <td>Fier</td>
            <td>Ein</td>
            <td>Swei</td>
            <td>Drei</td>
            <td>Fier</td>
            <td>Ein</td>
            <td>Swei</td>
            <td>Drei</td>
            <td>Fier</td>
            <td>Ein</td>
            <td>Swei</td>
            <td>Drei</td>
            <td>Fier</td>
        </tr>
        <tr>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
        </tr>
        <tr>
            <td>Uno</td>
            <td>Dos</td>
            <td>Tres</td>
            <td>Quatro</td>
            <td>Uno</td>
            <td>Dos</td>
            <td>Tres</td>
            <td>Quatro</td>
            <td>Uno</td>
            <td>Dos</td>
            <td>Tres</td>
            <td>Quatro</td>
            <td>Uno</td>
            <td>Dos</td>
            <td>Tres</td>
            <td>Quatro</td>
        </tr>
        <tr>
            <td>Ein</td>
            <td>Swei</td>
            <td>Drei</td>
            <td>Fier</td>
            <td>Ein</td>
            <td>Swei</td>
            <td>Drei</td>
            <td>Fier</td>
            <td>Ein</td>
            <td>Swei</td>
            <td>Drei</td>
            <td>Fier</td>
            <td>Ein</td>
            <td>Swei</td>
            <td>Drei</td>
            <td>Fier</td>
        </tr>
    </tbody>
</table>
</div>

JavaScript:

$(function(){
    var tableWrapperScollPos = 0;
    var tableWrapperOffset = $('.tablewrapper').offset().top;
    sizeTableHeader();
    $(window).on('resize', function(){
        tableWrapperOffset = $('.tablewrapper').offset().top;
        sizeTableHeader();
        positionTableHeader();
    });
    $('.tablewrapper').on('scroll', function(){
        tableWrapperScollPos = $(this).scrollTop();
        sizeTableHeader();
        positionTableHeader();
    });

    function positionTableHeader(){
        if (tableWrapperScollPos > 0){
            $('thead').css({
                'position': 'fixed',
                'top': tableWrapperOffset
            });
        } else {
            $('thead').css({
                'position': 'absolute',
                'top': 0
            });
        }
    }

    function sizeTableHeader(){
        var columns = $('table tr:first-child > td');
        var headers = $('table thead th');
        var tableWidth = $('thead').parent().width();
        var columnWidths = [];

        $.each(columns, function(index){
            $(headers[index]).css('width', $(this).width());
        });
        $('thead').width(tableWidth);
    }

    $('.show-column').on('click', function(){
        $('table td:nth-child(4),table th:nth-child(4)').show();
        sizeTableHeader();
    });
    $('.hide-column').on('click', function(){
        $('table td:nth-child(4), table th:nth-child(4)').hide();
        sizeTableHeader();
    });

});

1 个答案:

答案 0 :(得分:1)

它在我的IE中没有问题,但Chrome有你提到的问题

我试图在thead中添加一个类,其位置为:absolute,它可以正常工作

.head {
    position: absolute;
}

并将其添加到thead中的tr

<thead>
    <tr class="head">
        <th>Col 1</th>
        <th>Col 2</th>
        <th>Col 3</th>
        <th>Col 4</th>
        <th>Col 1</th>
        <th>Col 2</th>
        <th>Col 3</th>
        <th>Col 4</th>
        <th>Col 1</th>
        <th>Col 2</th>
        <th>Col 3</th>
        <th>Col 4</th>
        <th>Col 1</th>
        <th>Col 2</th>
        <th>Col 3</th>
        <th>Col 4</th>
    </tr>
</thead>

这是一个demo