Fix table header

Question

I have a table with much rows and columns. The table header needs to be fixed on the browser window when scrolling vertical. I have done that by adding a style position: fixed; to the table head when it reaches the top of the browser window.

But when I scroll horizontally the table header is not scrolling in the way as I applied the fixed position.

How can I make the table header scroll horizontally (also).

Javascript:

$(window).scroll(function () {
    var spec_lot_dash_sticky = $('.spec_dash_thead'),
        spec_lot_dash_scroll = $(window).scrollTop();
    if (spec_lot_dash_scroll >= ($("#table_id").offset().top)) {
        spec_lot_dash_sticky.addClass('fixed')
        $(".fixed").css("top", spec_lot_dash_thead_scroll_top)
    } else {
        spec_lot_dash_sticky.removeClass('fixed');
    }

});

jsfiddle link First scroll the vertical bar and then scroll horizontall scroll bar. The table header is not scrolling.

Possible duplicate of [jQuery position DIV fixed at top on scroll](http://stackoverflow.com/questions/20100461/jquery-position-div-fixed-at-top-on-scroll) — Pete, Nov 19 '15 at 10:35
Pete.. the link you provided is same as i done. I have fixed my header on top but my issue is when i scroll horizontal scrollbar of window the header is not scrolling along with data in tbody — user2083041, Nov 19 '15 at 10:45
@user2083041 This question may help you http://stackoverflow.com/questions/3303173/position-element-fixed-vertically-absolute-horizontally — OddDev, Nov 19 '15 at 10:48

miraco · Accepted Answer · 2015-11-19T11:25:10.390

1

You can also set its horizontal position at scroll based on the table position:

spec_lot_dash_sticky.css('left', $("#filter_table").offset().left - $(window).scrollLeft());

Here is a fiddle.

edited Nov 19 '15 at 11:25

answered Nov 19 '15 at 11:13

miraco

298
5
10

Thank you so much Mr. Miraco. – user2083041 Nov 19 '15 at 11:42

Rounin · Answer 2 · 2015-11-19T11:26:55.773

You shouldn't need any jQuery, to achieve the table you describe.

It's possible to reproduce a fixed <thead> and a vertically scrolling <tbody>, simply by using CSS:

.fixed{position:fixed}

#filter_table thead, #filter_table tbody {
display: block;
position: relative;
}

#filter_table th, #filter_table td {
width: 120px;
text-align: center;
}

#filter_table tbody {
height: 200px;
overflow: auto;
}

<table id="filter_table" style="margin-top:5%">

<thead class="spec_dash_thead" style="background-color:blue">
<tr>
<th>header1</th>
<th>header2</th>
<th>header3</th>
<th>header4</th>
<th>header5</th>
<th>header6</th>
</tr>
</thead>
      
<tbody>
<tr>
<td>data1</td>
<td>data2</td>
<td>data3</td>
<td>data4</td>
<td>data5</td>
<td>data6</td>
</tr>

<tr>
<td>data1</td>
<td>data2</td>
<td>data3</td>
<td>data4</td>
<td>data5</td>
<td>data6</td>
</tr>

<tr>
<td>data1</td>
<td>data2</td>
<td>data3</td>
<td>data4</td>
<td>data5</td>
<td>data6</td>
</tr>

<tr>
<td>data1</td>
<td>data2</td>
<td>data3</td>
<td>data4</td>
<td>data5</td>
<td>data6</td>
</tr> <tr>
<td>data1</td>
<td>data2</td>
<td>data3</td>
<td>data4</td>
<td>data5</td>
<td>data6</td>
</tr> <tr>
<td>data1</td>
<td>data2</td>
<td>data3</td>
<td>data4</td>
<td>data5</td>
<td>data6</td>
</tr> <tr>
<td>data1</td>
<td>data2</td>
<td>data3</td>
<td>data4</td>
<td>data5</td>
<td>data6</td>
</tr> <tr>
<td>data1</td>
<td>data2</td>
<td>data3</td>
<td>data4</td>
<td>data5</td>
<td>data6</td>
</tr>

<tr>
<td>data1</td>
<td>data2</td>
<td>data3</td>
<td>data4</td>
<td>data5</td>
<td>data6</td>
</tr> <tr>
<td>data1</td>
<td>data2</td>
<td>data3</td>
<td>data4</td>
<td>data5</td>
<td>data6</td>
</tr> <tr>
<td>data1</td>
<td>data2</td>
<td>data3</td>
<td>data4</td>
<td>data5</td>
<td>data6</td>
</tr>

<tr>
<td>data1</td>
<td>data2</td>
<td>data3</td>
<td>data4</td>
<td>data5</td>
<td>data6</td>
</tr>

<tr>
<td>data1</td>
<td>data2</td>
<td>data3</td>
<td>data4</td>
<td>data5</td>
<td>data6</td>
</tr>

<tr>
<td>data1</td>
<td>data2</td>
<td>data3</td>
<td>data4</td>
<td>data5</td>
<td>data6</td>
</tr>

<tr>
<td>data1</td>
<td>data2</td>
<td>data3</td>
<td>data4</td>
<td>data5</td>
<td>data6</td>
</tr>

<tr>
<td>data1</td>
<td>data2</td>
<td>data3</td>
<td>data4</td>
<td>data5</td>
<td>data6</td>
</tr>

<tr>
<td>data1</td>
<td>data2</td>
<td>data3</td>
<td>data4</td>
<td>data5</td>
<td>data6</td>
</tr>
</tbody>

</table>

I dont need a scroll bar for tbody. I need to use browser scroll bar only and on horizontal scroll bar i need to scroll thead also — user2083041, Nov 19 '15 at 11:29

Fix table header

2 Answers2