Question

HTML

 <div class="tableData" id="indexTable">
     <table>
         <thead>
             "..."             
         </thead>
         <tbody>
             "..."             
         </tbody>
     </table>
</div>

CSS（.tableData）

.tableData {
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;

    box-shadow: 10px 10px 5px #000;
    overflow: auto;
    margin: 20px;
    width: 92%;
}

的jQuery

var topOffset = parseInt($(".tableData table thead").css('top'));

(function($){
    $(window).load(function(){
        $(".tableData").mCustomScrollbar({
            axis: "yx",
            theme: "dark",
            scrollbarPosition: "outside",
            setHeight: "630",
            setWidth: "1218",
            callbacks: {
                whileScrolling: function() {
                    var contentPos = $(this.mcs.top);
                    $('.tableData thead').css({
                        'top': contentPos + topOffset
                    })
                }
            }
       });
   });
})(jQuery);

我想要完成的是在滚动表格中的数据时修复表格标题。我遇到了一些尝试实现这一目标的方法：

1。 jQuery.floatThead

在我的情况下，

floatThead和mCustomScrollbar似乎互相矛盾，floatThead无效。

2。 'position：fixed'

这似乎是我想要的最佳解决方案。但是，如果我这样做，那么<thead>会从页面水平移动，因为它需要滚动。

我的想法是，如果我能找到一种方法来只修复<thead>的Y位置（这是我在上面的jQuery中尝试的那样）那么这样可行但不是运气。

Answer 1

我最终离开了mCustomScrollber，因为它没有提供我想要的足够功能。但是，我仍然希望创建一个固定的标题，我发现这段代码可以解决这个问题：

function fixHead(table) {
    table.attr("data-item-original-width", table.width());
    table.find('.thead .tr .th').each(function() {
        jQuery(this).attr("data-item-original-width", jQuery(this).width());
    });
    table.find('.tbody .tr:eq(0) .td').each(function() {
        jQuery(this).attr("data-item-original-width", jQuery(this).width());
    });

    var newTable = table.clone();

    table.find('.thead .tr').each(function() {
        jQuery(this).remove();
    });
    newTable.find('.tbody .tr').remove();

    table.parent().parent().parent().prepend(newTable);
    newTable.wrap("<div/>");
    newTable.parent().addClass('fixed-head__wrap');

    newTable.width(newTable.attr('data-item-original-width'));
    newTable.find('.thead .tr .th').each(function(){
        jQuery(this).width(jQuery(this).attr("data-item-original-width"));
    });
    table.width(table.attr('data-item-original-width'));
    table.find('.tbody .tr:eq(0) .td').each(function(){
        jQuery(this).width(jQuery(this).attr("data-item-original-width"));
    });
}

table是表格元素（即$('table')）。我意识到这不是特定于mCustomScrollbar，但效果应该与它正在做的是从原始表中取出thead并将其复制到单独的表中。此单独的表格没有tbody并且具有固定的位置。 <{1}}也会从原始表格中删除，因此只剩下它的正文。

我希望这对任何仍希望获得固定标题效果的人有帮助

我可以使用CSS自定义Chrome中的滚动条：

thead

请访问CSS Tricks获取更多信息

将固定表头保留在mCustomScrollbar中

1 个答案: