Question

我有一个数据表，这个表从mysql数据库

读取他的数据

我使用这个jquery和css来修复滚动表格的标题

;(function($) {
   $.fn.fixMe = function() {
      return this.each(function() {
         var $this = $(this),
            $t_fixed;
         function init() {
            $this.wrap('<div class="table-responsive" />');
            $t_fixed = $this.clone();
            $t_fixed.find("tbody").remove().end().addClass("fixed").insertBefore($this);
            resizeFixed();
         }
         function resizeFixed() {
            $t_fixed.find("th").each(function(index) {
               $(this).css("width",$this.find("th").eq(index).outerWidth()+"px");
            });
         }
         function scrollFixed() {
            var offset = $(this).scrollTop(),
            tableOffsetTop = $this.offset().top,
            tableOffsetBottom = tableOffsetTop + $this.height() - $this.find("thead").height();
            if(offset < tableOffsetTop || offset > tableOffsetBottom)
               $t_fixed.hide();
            else if(offset >= tableOffsetTop && offset <= tableOffsetBottom && $t_fixed.is(":hidden"))
               $t_fixed.show();
         }
         $(window).resize(resizeFixed);
         $(window).scroll(scrollFixed);
         init();
      });
   };
})(jQuery);

$(document).ready(function(){
   $("table").fixMe();
   $(".up").click(function() {
      $('html, body').animate({
      scrollTop: 0
   }, 2000);
 });
});

HTML：

<div class="table-responsive" >
    <table class='ol-md-12 table-bordered table-striped table-condensed cf table-bordered'>
        <thead class='cf'>
            <tr>
                <th rowspan='2'>#</th>
                <th rowspan='2'>Staff
                </th>
                <th rowspan='2'>MyTask</th>
                <th rowspan='2'>Status</th>
                <th rowspan='2'>Description</th>
                <th rowspan='2'>transfered</th>
                <th colspan='3'>Planning</th>
                <th rowspan='2'>Date
                </th>
                <th rowspan='2'>Project</th>
                <th rowspan='2'>Type</th>
                <th rowspan='2'>Frequency</th>
                <th rowspan='2'>Priority</th>
                <th rowspan='2'>Note</th>

            </tr>
            <tr>
                <th> Start Date</th>
                <th> Due Date</th>
                <th>Duration</th>
            </tr>
        </thead>

问题是当我向下滚动列宽更改并且标题中的标题与表格主体的内容不匹配时

您可以查看以下链接

https://fiddle.jshell.net/mhmd2991/oy764es6/12/

上的代码

我怎么能修好!! !!

Answer 1

将内容分成2个表将无法正常使用您想要的所需布局，因为每个单元格的宽度受单元格内容的影响，整个表格宽度按每个单元格的宽度获取其布局和身高。

寻找不同的方法。

滚动

1 个答案: