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

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

一种选择是在设置绝对样式之前询问列，然后在将样式应用于标题后恢复该宽度。像这样的东西： 在这里小提琴：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>