Fixed table header with horizontal AND vertical scrolling body

Question

Objectives :

• Column width of table header and table body should be same.
• Table header to be fixed on vertical scroll.
• Table header to be moved on horizontal scroll.
• Header to be displayed inside scroll-able division of HTML.

Problem statements:

• Table header does not get fixed on vertical scroll.
• Header displayed out of scroll-able division of HTML(When header position is fixed).

I have seen many posts, but could not find the solution to this particular problem statement.

I have created two JSFiddles to demonstrate the problem statements:

Fiddle01: Solution works good as a separate module. JSFiddle01

Fiddle02: Solution does not work when its integrated with other divs. JSFiddle02

Any help would be very much appreciated.

$(function() {
var $window = $(window);
var $table = $('table');
var $head = $table.find('thead');
var $body = $table.find('tbody');
var $headTds1 = $head.find('tr').eq(0).find('th');
var $headTds2 = $head.find('tr').eq(1).find('th');
var $bodyTds = $body.find('tr').eq(0).find('td');
var tableWidth = $table.outerWidth();
// console.log("Width:"+tableWidth);
var $tableNew = $('<table/>');
var cl = 0; // colspan total length
var cc = 0; // colspan count

$table.css({ width: tableWidth });
$tableNew
    .attr("class", $table.attr("class"))
    .css({ width: tableWidth });

$head.css({ background: '#fff' });

$.each($headTds1, function(index, value) {
    var $headTd = $(value);
    var colspan = $headTd.attr('colspan') || 0;

    if (colspan) {
        while (colspan) {
            addwidth($($headTds2[cl]), $($bodyTds[index + cl - cc]));
            colspan--
            cl++
        }
        cc++;
    } else {
        addwidth($headTd, $($bodyTds[index + cl - cc]));
    }
});

function addwidth($headTd, $bodyTd) {
    var headTdwidth2 = $headTd.outerWidth();
    var bodyTdwidth2 = $bodyTd.outerWidth();
    var width2 = headTdwidth2 > bodyTdwidth2 ? headTdwidth2 : bodyTdwidth2;

    $bodyTd.css({ 'width': width2 });
    $headTd.css({ 'width': width2 });

    var headTdwidth = $headTd.width();
    var bodyTdwidth = $bodyTd.width();
    var width = headTdwidth > bodyTdwidth ? headTdwidth : bodyTdwidth;
    $bodyTd.html('<div style="width: ' + width + 'px">' + $bodyTd.html() + '</div>');
    $headTd.html('<div style="width: ' + width + 'px">' + $headTd.html() + '</div>');
}

$head.appendTo($tableNew);
$tableNew.insertBefore($table);
// $table.css({ 'margin-top': $tableNew.height() });

$tableNew.css({ position: 'fixed' });

$window.scroll(reLeft);
$window.resize(reLeft);


function reLeft() {
    $tableNew.css({ left: $table.offset().left - $window.scrollLeft() });
}
});

Answer 1

You are cloning the table for fix header, better you can direct fix the header of original table which will results the same.

Element with position:fixed changes the width with respect to viewport, which results width gets change on scrolling as you can check here https://jsfiddle.net/chourasiapawankumar/vg7q3tyc/19

Approach:1

instead of position:fixed use relative in th and it is working with your parent div which has min-height:100px .

https://jsfiddle.net/chourasiapawankumar/krw0qpbL/62/

Approach:2

You can see both horizontal and vertical scroll bar at a time on removing min-height of parent div which I have commented in the below fiddle.

https://jsfiddle.net/chourasiapawankumar/vg7q3tyc/33/

Answer 2

Dunno if you can/want to use a library, but floatHead works nicely and it looks like it does what you want... Go on the linked page and click the Demo "Run FloatHead" button, you will see it in action.

Answer 3

The most common trick for scrollable tables is to create a clone of the table and display the <thead> from first clone and <tbody> from the second. This is done to ensure that both sections have identical structure and column widths. The following uses this idea + sticky positioning:

 $(function() { $(".fixed_headers").each(function() { $(this).wrap("<div class='scrollable-table'></div>"); $(this).clone().insertBefore(this); }); });

 @import url(https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css); .scrollable-table { overflow: auto; max-height: 250px; }.scrollable-table table:nth-child(1) { position: sticky; left: 0; top: 0; background-color: #fff; margin-bottom: 0; }.scrollable-table table:nth-child(1) tbody { visibility: collapse; }.scrollable-table table:nth-child(2) thead { visibility: collapse; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <p style="text-align: center;">Best viewed in full page</p> <div class="container"> <table class="table table-condensed table-bordered table-hover fixed_headers"> <thead> <tr> <th class="nb_custom_th">Store_Country</th> <th class="nb_custom_th">Brand</th> <th class="nb_custom_th">Product Description</th> <th class="nb_custom_th">12</th> <th class="nb_custom_th">df</th> <th class="nb_custom_th">trr</th> <th class="nb_custom_th">Tax onlatest periodofthe fiscal17</th> <th class="nb_custom_th">df1</th> <th class="nb_custom_th">121</th> <th class="nb_custom_th">4455tre4</th> <th class="nb_custom_th">4455tre41</th> <th class="nb_custom_th">4455tre42</th> <th class="nb_custom_th">4455tre43</th> <th class="nb_custom_th">4455tre431</th> <th class="nb_custom_th">4455tre433</th> <th class="nb_custom_th">4455tre434</th> <th class="nb_custom_th">4455tre435</th> <th class="nb_custom_th">4455tre436</th> <th class="nb_custom_th">4455tre437</th> <th class="nb_custom_th">4455tre438</th> <th class="nb_custom_th">4455tre439</th> <th class="nb_custom_th">4455tre4310</th> <th class="nb_custom_th">4455tre4311</th> <th class="nb_custom_th">4455tre4312</th> <th class="nb_custom_th">4455tre4313</th> <th class="nb_custom_th">4455tre4314</th> <th class="nb_custom_th">4455tre4315</th> <th class="nb_custom_th">4455tre4316</th> <th class="nb_custom_th">4455tre4317</th> <th class="nb_custom_th">4455tre43171</th> <th class="nb_custom_th">Tax on latest period of the fiscal15</th> <th class="nb_custom_th">Tax on latest period of the fiscal16</th> <th class="nb_custom_th">Taxon latest period ofthefiscal18</th> <th class="nb_custom_th">Taxon latest period ofthefiscal181</th> </tr> </thead> <tbody> <tr class="nb_custom_tr"> <td class="nb_custom_td drillHandler">India</td> <td class="nb_custom_td drillHandler">Apple</td> <td class="nb_custom_td drillHandler">Apple iPad 4 16GB Wi-Fi + Cellular</td> <td class="nb_custom_td" style="text-align: right;">3520</td> <td class="nb_custom_td" style="text-align: right;">3520</td> <td class="nb_custom_td" style="text-align: right;">3520</td> <td class="nb_custom_td" style="text-align: right;">3520</td> <td class="nb_custom_td" style="text-align: right;">3520</td> <td class="nb_custom_td" style="text-align: right;">3520</td> <td class="nb_custom_td" style="text-align: right;">6620</td> <td class="nb_custom_td" style="text-align: right;">6620</td> <td class="nb_custom_td" style="text-align: right;">6620</td> <td class="nb_custom_td" style="text-align: right;">6620</td> <td class="nb_custom_td" style="text-align: right;">6620</td> <td class="nb_custom_td" style="text-align: right;">6620</td> <td class="nb_custom_td" style="text-align: right;">6620</td> <td class="nb_custom_td" style="text-align: right;">6620</td> <td class="nb_custom_td" style="text-align: right;">6620</td> <td class="nb_custom_td" style="text-align: right;">6620</td> <td class="nb_custom_td" style="text-align: right;">6620</td> <td class="nb_custom_td" style="text-align: right;">6620</td> <td class="nb_custom_td" style="text-align: right;">6620</td> <td class="nb_custom_td" style="text-align: right;">6620</td> <td class="nb_custom_td" style="text-align: right;">6620</td> <td class="nb_custom_td" style="text-align: right;">6620</td> <td class="nb_custom_td" style="text-align: right;">6620</td> <td class="nb_custom_td" style="text-align: right;">6620</td> <td class="nb_custom_td" style="text-align: right;">6620</td> <td class="nb_custom_td" style="text-align: right;">6620</td> <td class="nb_custom_td" style="text-align: right;">6620</td> <td class="nb_custom_td" style="text-align: right;">6620</td> <td class="nb_custom_td" style="text-align: right;">6620</td> <td class="nb_custom_td" style="text-align: right;">6620</td> <td class="nb_custom_td" style="text-align: right;">6620</td> </tr> <tr class="nb_custom_tr"> <td class="nb_custom_td drillHandler">India</td> <td class="nb_custom_td drillHandler">Apple</td> <td class="nb_custom_td drillHandler">Apple iPad Air</td> <td class="nb_custom_td" style="text-align: right;">1895</td> <td class="nb_custom_td" style="text-align: right;">1895</td> <td class="nb_custom_td" style="text-align: right;">1895</td> <td class="nb_custom_td" style="text-align: right;">1895</td> <td class="nb_custom_td" style="text-align: right;">1895</td> <td class="nb_custom_td" style="text-align: right;">1895</td> <td class="nb_custom_td" style="text-align: right;">79875</td> <td class="nb_custom_td" style="text-align: right;">79875</td> <td class="nb_custom_td" style="text-align: right;">79875</td> <td class="nb_custom_td" style="text-align: right;">79875</td> <td class="nb_custom_td" style="text-align: right;">79875</td> <td class="nb_custom_td" style="text-align: right;">79875</td> <td class="nb_custom_td" style="text-align: right;">79875</td> <td class="nb_custom_td" style="text-align: right;">79875</td> <td class="nb_custom_td" style="text-align: right;">79875</td> <td class="nb_custom_td" style="text-align: right;">79875</td> <td class="nb_custom_td" style="text-align: right;">79875</td> <td class="nb_custom_td" style="text-align: right;">79875</td> <td class="nb_custom_td" style="text-align: right;">79875</td> <td class="nb_custom_td" style="text-align: right;">79875</td> <td class="nb_custom_td" style="text-align: right;">79875</td> <td class="nb_custom_td" style="text-align: right;">79875</td> <td class="nb_custom_td" style="text-align: right;">79875</td> <td class="nb_custom_td" style="text-align: right;">79875</td> <td class="nb_custom_td" style="text-align: right;">79875</td> <td class="nb_custom_td" style="text-align: right;">79875</td> <td class="nb_custom_td" style="text-align: right;">79875</td> <td class="nb_custom_td" style="text-align: right;">79875</td> <td class="nb_custom_td" style="text-align: right;">79875</td> <td class="nb_custom_td" style="text-align: right;">79875</td> <td class="nb_custom_td" style="text-align: right;">79875</td> </tr> <tr class="nb_custom_tr"> <td class="nb_custom_td drillHandler">India</td> <td class="nb_custom_td drillHandler">Apple</td> <td class="nb_custom_td drillHandler">Apple iPad Mini</td> <td class="nb_custom_td" style="text-align: right;">2602</td> <td class="nb_custom_td" style="text-align: right;">2602</td> <td class="nb_custom_td" style="text-align: right;">2602</td> <td class="nb_custom_td" style="text-align: right;">2602</td> <td class="nb_custom_td" style="text-align: right;">2602</td> <td class="nb_custom_td" style="text-align: right;">2602</td> <td class="nb_custom_td" style="text-align: right;">6245</td> <td class="nb_custom_td" style="text-align: right;">6245</td> <td class="nb_custom_td" style="text-align: right;">6245</td> <td class="nb_custom_td" style="text-align: right;">6245</td> <td class="nb_custom_td" style="text-align: right;">6245</td> <td class="nb_custom_td" style="text-align: right;">6245</td> <td class="nb_custom_td" style="text-align: right;">6245</td> <td class="nb_custom_td" style="text-align: right;">6245</td> <td class="nb_custom_td" style="text-align: right;">6245</td> <td class="nb_custom_td" style="text-align: right;">6245</td> <td class="nb_custom_td" style="text-align: right;">6245</td> <td class="nb_custom_td" style="text-align: right;">6245</td> <td class="nb_custom_td" style="text-align: right;">6245</td> <td class="nb_custom_td" style="text-align: right;">6245</td> <td class="nb_custom_td" style="text-align: right;">6245</td> <td class="nb_custom_td" style="text-align: right;">6245</td> <td class="nb_custom_td" style="text-align: right;">6245</td> <td class="nb_custom_td" style="text-align: right;">6245</td> <td class="nb_custom_td" style="text-align: right;">6245</td> <td class="nb_custom_td" style="text-align: right;">6245</td> <td class="nb_custom_td" style="text-align: right;">6245</td> <td class="nb_custom_td" style="text-align: right;">6245</td> <td class="nb_custom_td" style="text-align: right;">6245</td> <td class="nb_custom_td" style="text-align: right;">6245</td> <td class="nb_custom_td" style="text-align: right;">6245</td> </tr> <tr class="nb_custom_tr"> <td class="nb_custom_td drillHandler">India</td> <td class="nb_custom_td drillHandler">Apple</td> <td class="nb_custom_td drillHandler">Apple IPhone 4S 64GB</td> <td class="nb_custom_td" style="text-align: right;">2963</td> <td class="nb_custom_td" style="text-align: right;">2963</td> <td class="nb_custom_td" style="text-align: right;">2963</td> <td class="nb_custom_td" style="text-align: right;">2963</td> <td class="nb_custom_td" style="text-align: right;">2963</td> <td class="nb_custom_td" style="text-align: right;">2963</td> <td class="nb_custom_td" style="text-align: right;">2827</td> <td class="nb_custom_td" style="text-align: right;">2827</td> <td class="nb_custom_td" style="text-align: right;">2827</td> <td class="nb_custom_td" style="text-align: right;">2827</td> <td class="nb_custom_td" style="text-align: right;">2827</td> <td class="nb_custom_td" style="text-align: right;">2827</td> <td class="nb_custom_td" style="text-align: right;">2827</td> <td class="nb_custom_td" style="text-align: right;">2827</td> <td class="nb_custom_td" style="text-align: right;">2827</td> <td class="nb_custom_td" style="text-align: right;">2827</td> <td class="nb_custom_td" style="text-align: right;">2827</td> <td class="nb_custom_td" style="text-align: right;">2827</td> <td class="nb_custom_td" style="text-align: right;">2827</td> <td class="nb_custom_td" style="text-align: right;">2827</td> <td class="nb_custom_td" style="text-align: right;">2827</td> <td class="nb_custom_td" style="text-align: right;">2827</td> <td class="nb_custom_td" style="text-align: right;">2827</td> <td class="nb_custom_td" style="text-align: right;">2827</td> <td class="nb_custom_td" style="text-align: right;">2827</td> <td class="nb_custom_td" style="text-align: right;">2827</td> <td class="nb_custom_td" style="text-align: right;">2827</td> <td class="nb_custom_td" style="text-align: right;">2827</td> <td class="nb_custom_td" style="text-align: right;">2827</td> <td class="nb_custom_td" style="text-align: right;">2827</td> <td class="nb_custom_td" style="text-align: right;">2827</td> </tr> </tbody> </table> </div>