使tr宽度与粘台头上的广告宽度匹配

Question

我有一个正在使用的粘性表标题。 现在，用户滚动通过了标题，并且标题正确粘贴。 我遇到的问题是tableHeaderRow与tableHeader宽度不同。

粘性标头的当前步骤：

1. Ajax调用以用数据填充表
2. 保存列宽
3. 制作tableHeader position:absolute
4. 将列宽度重新设置为tableHeader （这是它靠近的地方，但短了约100像素）

试过了

1. 将tableHeaderRow设置为预期的宽度。
2. 将tableHeaderRow设置为100%宽度。
3. 删除padding和margin

的HTML

                    <table id="table" class="table  tablesorter table-responsive table-striped table-hover" style="overflow:auto;border-collapse:collapse;">
                    <thead id='tableHeader' style="background-color:LightBlue;">
                        <tr id='tableHeaderRow' >
                            <th id="col1" class='header'>Column1</th>
                            <th id="col2" class='header'>Column2</th>
                            <th id="col3" class='header'>Column3</th>
                            <th id="col4" class='header'>Column4</th>
                            <th id="col5" class='header'>Column5</th>
                            <th id="col6" class='header'>Column6</th>
                            <th id="col7" class='header'>Column7</th>
                        </tr>
                    </thead>
                        <tbody id='tableBody'>
                        </tbody>
                    </table>

节省宽度

         col1Width = $('#col1').width(); 
         col2Width = $('#col2').width();
         col3Width = $('#col3').width();
         col4Width = $('#col4').width();
         col5Width = $('#col5').width();
         col6Width = $('#col6').width();
         col7Width = $('#col7').width();

滚动事件监听器

    var tableHeaderTop = $("#tableHeader").offset().top;
    var above = true;

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


            $('.column1Value').width(col1Width);
            $('#col1').width(col1Width);

            $('.column2Value').width(col2Width);
            $('#col2').width(col2Width);

            $('.column3Value').width(col3Width);
            $('#col3').width(col3Width);

            $('.column4Value').width(col4Width);
            $('#col4').width(col4Width);

            $('.column5Value').width(col5Width);
            $('#col5').width(col5Width);

            $('.column6Value').width(col6Width);
            $('#col6').width(col6Width);

            $('.column7Value').width(col7Width);
            $('#col7').width(col7Width);

          above = false;
         }else{
            $('#tableHeader').css({
                top: $(window).scrollTop() - $("#top").height() -15,
            });

         }


        }else{
            $('#tableHeader').css({
                position:'static',
            });
          above = true;
        }
    });

请要求任何澄清。 进行引导以显示问题。

注意：我对此问题进行了bootply ，但是它可以按我希望的那样工作。 这使我相信这将是某种改变CSS的第三方插件。 当我有一个答案时，我将更新一个答案，与此同时，如果有人想使用我的自定义粘性表标题代码（感谢其他提供帮助的人），欢迎您这样做。

Answer 1

好吧，这可能无法完全回答您的问题。 但是，对于您要尝试做的事情-这个jQuery插件几乎是我见过的最好的插件： http : //www.fixedheadertable.com/

进行谷歌搜索时，我还找到了一个纯CSS解决方案（我没有亲身经历，但是如果它能按预期工作，那就太酷了！）： http : //jsfiddle.net/dPixie/byB9d/3/

我也曾经做过这样的脚本。 它的简化版本看起来像这样。 jsFiddle： http : //jsfiddle.net/L0oy2L01/

HTML （很抱歉，内联CSS样式...随时添加您自己的类！）

<div>
    <table>
        <tr style="background-color: #ccc;">
            <td data-col="1" class="header">
                Column1
            </td>
            <td data-col="2" class="header">
                Column2
            </td>
            <td data-col="3" class="header">
                Column3
            </td>
        </tr>
    </table>
</div>
<div id="contentDiv" style="max-height: 50px; overflow-y: auto;">
    <table class="contentTable">
        <tr>
            <td data-col="1" class="content">
                My Content1
            </td>
            <td data-col="2" class="content">
                My Content2
            </td>
            <td data-col="3" class="content">
                My Content3
            </td>
        </tr>
        <tr>
            <td data-col="1" class="content">
                My Content4
            </td>
            <td data-col="2" class="content">
                My Content5
            </td>
            <td data-col="3" class="content">
                My Content6
            </td>
        </tr>
        <tr>
            <td data-col="1" class="content">
                My Content7
            </td>
            <td data-col="2" class="content">
                My Content8
            </td>
            <td data-col="3" class="content">
                My content9
            </td>
        </tr>
    </table>
</div>

jQuery的

<script type="text/javascript">
$(document).ready(function(){

    var totalWidth = 0;
    $('.header').each(function(){
        var colwidth = $(this).outerWidth();
        var colnumber = $(this).data('col');

            $('.content[data-col="'+ colnumber +'"]').each(function(){
                if($(this).outerWidth() >= colwidth){
                    colwidth = $(this).outerWidth();
                    }
                });

            $('td[data-col="'+ colnumber +'"]').css('width',colwidth);
            totalWidth += colwidth;
        });

    //if table height is bigger than contentDiv height there will be a scroll.. therefor we adjust contentDiv to it's content + scrolling
    if($('.contentTable').outerHeight() > 50){
        $('#contentDiv').outerWidth(totalWidth + 30);
        }
    });
</script>