Question

我在div中有一个带有scroll-x和scroll-y的大表。我想要的是在y轴滚动时固定表头。

我可以将表头设置在div的顶部，但它不符合overflow-x。并且表头列宽度需要与内容列相同。

我怎样才能达到这个目标？

Answer 1

我探索了你的问题并得到了解决方案[我相信没有纯粹的css解决方案退出。！]。此外，欢迎您对此进行优化。

//Script

 <script>

 var maxw = 0;
 $(document).ready( function () {

  $('.Top2').bind('scroll', function(){
     $(".Top1").scrollLeft($(this).scrollLeft());
  });

      var len = $("table.head > tbody").find("> tr:first > td").length;
       for(i=0; i<len;i++) {
           maxval(i);
       maxw = 0 ;
       }     

   });

function maxval(index) {

    $("table").find('tr').each(function (i, el) {
                var $tds = $(this).find('td');
                w = $tds.eq(index).width(); 
                if(w>maxw){
                maxw = w; //Get max width for the column i
                }       
    });
   myf(maxw,index); // Set the css according to 'td'
}

function myf(maxw,index){
 $("table").find('tr').each(function (i, el) {
     var $tds =  $(this).find('td');
     $tds.eq(index).css("padding-right", maxw- ($tds.eq(index).width()));  // patch : Is any other way?
 });
}
   </script>

另请查看我更新的fiddle。

修复了可滚动div内的标题表，其中表头列宽度为＃39;和＆＃39;内容列宽＆＃39;

1 个答案: