如何在改变位置时保持 table header 宽度

Question

我正在制作便签 table header。当用户滚动到 table 并越过 table header 时，我希望 table header 停留在页面顶部并跟随用户。我目前的问题是，当我将 thead position 更改为 absolute 时，header 失去了宽度。我怎样才能保持（或重置？）header 宽度以适应我的列？

注意：我不能使用任何常量，宽度会根据数据改变。

注意：我知道插件，但我在不使用插件的情况下编写代码。

注意：我正在使用 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',
            });
        }
  });

Answer 1

一个选项是在设置绝对样式之前询问列，然后在将样式应用到 header 之后恢复该宽度。是这样的： Fiddle 这里：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',
        });
    }
 });

html 包括适当的类和 ID：

<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>

如何在改变位置时保持 table header 宽度

How to keep table header widths when changing position

html

javascript

jquery

twitter-bootstrap