Joel Kinzel
Reputation: 970
Table header text disappears when hiding a column
I have a table inside of a wrapper. I need the column header to be static at the top when the user scrolls. I have that part working fine.
One of the other requirements is that columns can be shown or hidden, and the header should adjust. That seems to work with one minor bug: the header text is disappearing when the user has scrolled and then hits "hide column".
You can find the fiddle here: 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();
});
});
Upvotes: 0
Views: 93
Answers (1)
Mohamed Abbas
Reputation: 138
It works with me without problems in IE but chrome have the issue you mentioned
I tried to add a class to tr in thead having position:absolute and it works
.head {
position: absolute;
}
and add it to tr in thead
<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>
here is a demo
Upvotes: 1
Related Questions
- JQuery hide table column
- Hiding table columns with jQuery based on column header
- How can i hide a table header Column
- Hide a table column with Javascript
- Show/Hide table header using jQuery
- How can I hide a column in html table where it has a merged header
- Hide table header column border
- hiding jquery table columns with header anchor text value
- Hiding elements in table causes columns to shift
- Attempting to hide a column of a html table using jQuery