CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrap
Jordan.J.D
Jordan.J.D

Reputation: 8113

How to keep table header widths when changing position

I am working on a sticky table header. When the user scrolls into table and over the table header, I want the table header to stick to the top of the page and follow the user. My current problem is that when I change the thead position to absolute, the headers lose their width. How can I keep (or reset?) the header widths to stick with my columns?

Note: I can't use any constants, the width can change depending on data.

Note: I am aware of plugins, but am coding this without the use of plugins.

Note: I am working with bootstrap CSS.

HTML

                    <div class="table-responsive" style="overflow:auto">
                    <table id="table" class="table tablesorter table-striped table-hover">
                    <thead id='tableHeader' style="background-color:white;">
                        <tr>
                            <th class='header'>Column1 Head</th>
                            <th class='header'>Column2 Head</th>
                            <th class='header'>Column3 Head</th>
                            <th class='header'>Column4 Head</th>
                            <th class='header'>Column5 Head</th>
                            <th class='header'>Column6 Head</th>
                            <th class='header'>Column7 Head</th>
                        </tr>
                    </thead>
                        <tbody id='tableBody'>
                        </tbody>
                    </table>
                    </div>

Javascript

        //Window scroll event listener to fix table headers
    var tableHeaderTop = $("#tableHeader").offset().top;
    $( window ).scroll(function() {
        if(tableHeaderTop - $(window).scrollTop() <= 0){
            console.log('scroll below header');
            $('#tableHeader').css({
                position:'absolute',
                top: $(window).scrollTop() - $("#top").height() -15
            });
        }else{
            console.log('scroll above header');
            $('#tableHeader').css({
                position:'static',
            });
        }
  });

enter image description here

enter image description here

Upvotes: 4

Views: 3360

Answers (1)

Joe W
Joe W

Reputation: 2891

One option is to interrogate the column before you set the absolute styling and then restore that width after applying the style to the header. Something like this: Fiddle here: http://jsfiddle.net/mn76ujsu/3/)

    //Window scroll event listener to fix table headers
var tableHeaderTop = $("#tableHeader").offset().top;
$( window ).scroll(function() {
    if(tableHeaderTop - $(window).scrollTop() <= 0){
        console.log('scroll below header');
        var col1Width = $('#column1').width(); //Find width before change
        var col2Width = $('#column2').width();
        var col3Width = $('#column3').width();
        $('#tableHeader').css({
            position:'absolute',
            top: $(window).scrollTop() - $("#top").height() -0
        });

        $('.column1Value').width(col1Width);
        $('#column1').width(col1Width);
        $('.column2Value').width(col2Width);
        $('#column2').width(col2Width);
        $('.column2Value').width(col3Width);
        $('#column3').width(col3Width);
    }else{
        console.log('scroll above header');
        $('#tableHeader').css({
            position:'static',
        });
    }
 });

With html including appropirate classes and IDs:

<div class="table-responsive" style="overflow:auto">
                <table id="table" class="table tablesorter table-striped table-hover">
                <thead id='tableHeader' style="background-color:white;">
                    <tr>
                        <th id="column1" class='header'>Column1 Head</th>
                        <th id="column2" class='header'>Column2 Head</th>
                        <th id="column3" class='header'>Column3 Head</th>

                    </tr>
                </thead>
                    <tbody id='tableBody'>
                        <tr>
                            <td class="column1Value">Some text</td>
                            <td class="column2Value">Some text</td>
                            <td class="column3Value">Some text</td>
                        </tr>
                         <tr>
                            <td class="column1Value">Some text</td>
                            <td class="column2Value">Some text</td>
                            <td class="column3Value">Some text</td>
                        </tr>
                         <tr>
                            <td class="column1Value">Some text</td>
                            <td class="column2Value">Some text</td>
                            <td class="column3Value">Some text</td>
                        </tr>
                         <tr>
                            <td class="column1Value">Some text</td>
                            <td class="column2Value">Some text</td>
                            <td class="column3Value">Some text</td>


                        </tr>
                         <tr>
                            <td class="column1Value">Some text</td>
                            <td class="column2Value">Some text</td>
                            <td class="column3Value">Some text</td>
                        </tr>
                         <tr>
                            <td class="column1Value">Some text</td>
                            <td class="column2Value">Some text</td>
                            <td class="column3Value">Some text</td>
                        </tr>
                        <tr>
                            <td class="column1Value">Some text</td>
                            <td class="column2Value">Some text</td>
                            <td class="column3Value">Some text</td>
                        </tr>
                        <tr>
                            <td class="column1Value">Some text</td>
                            <td class="column2Value">Some text</td>
                            <td class="column3Value">Some text</td>
                        </tr>
                        <tr>
                            <td class="column1Value">Some text</td>
                            <td class="column2Value">Some text</td>
                            <td class="column3Value">Some text</td>
                        </tr>
                        <tr>
                            <td class="column1Value">Some text</td>
                            <td class="column2Value">Some text</td>
                            <td class="column3Value">Some text</td>
                        </tr>
                        <tr>
                            <td class="column1Value">Some text</td>
                            <td class="column2Value">Some text</td>
                            <td class="column3Value">Some text</td>
                        </tr>
                        <tr>
                            <td class="column1Value">Some text</td>
                            <td class="column2Value">Some text</td>
                            <td class="column3Value">Some text</td>
                        </tr>
                        <tr>
                            <td class="column1Value">Some text</td>
                            <td class="column2Value">Some text</td>
                            <td class="column3Value">Some text</td>
                        </tr>
                        <tr>
                            <td class="column1Value">Some text</td>
                            <td class="column2Value">Some text</td>
                            <td class="column3Value">Some text</td>
                        </tr>
                        <tr>
                            <td class="column1Value">Some text</td>
                            <td class="column2Value">Some text</td>
                            <td class="column3Value">Some text</td>
                        </tr>
                        <tr>
                            <td class="column1Value">Some text</td>
                            <td class="column2Value">Some text</td>
                            <td class="column3Value">Some text</td>
                        </tr>
                        <tr>
                            <td class="column1Value">Some text</td>
                            <td class="column2Value">Some text</td>
                            <td class="column3Value">Some text</td>
                        </tr>
                        <tr>
                            <td class="column1Value">Some text</td>
                            <td class="column2Value">Some text</td>
                            <td class="column3Value">Some text</td>
                        </tr>
                    </tbody>
                </table>
                </div>

Upvotes: 3

Related Questions