Question

我正在处理一个粘性表标题。现在，用户滚动传递标题，标题正确粘贴。我遇到的问题是tableHeaderRow与tableHeader的宽度不同。

粘贴标题的当前步骤：

使用数据填充表格的Ajax调用
保存列宽
制作tableHeader position:absolute
将列宽设置回tableHeader（这是关闭但短约100像素的地方）

试过

将tableHeaderRow设置为预期宽度。
将tableHeaderRow设置为100%宽度。
删除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();

Stick Scroll Event Listener

    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上工作以显示问题。

注意：我为此问题制作了一个bootply，但它的工作方式正如我想要的那样在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>

使tr宽度与粘性表头上的宽度匹配

1 个答案: