javascript - 更改位置时如何保持表头宽度

Question

我正在处理一个粘性表格标题。当用户滚动到表格并越过表格标题时，我希望表格标题贴在页面顶部并跟随用户。我目前的问题是，当我将 thead position 更改为 absolute 时，标题会失去宽度。如何保持(或重置？)标题宽度以与我的列保持一致？

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

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

注意:我正在使用 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

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

使用包含适当类和 ID 的 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 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>