我在包装器里面有一个表。当用户滚动时,我需要列标题在顶部是静态的。我有那部分工作正常。
其他要求之一是可以显示或隐藏列,并且标题应该调整。这似乎与一个小错误有关:当用户滚动然后点击"隐藏列"时,标题文本正在消失。
你可以在这里找到小提琴: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();
});
});
答案 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