修复了可滚动 div 内的标题表，“表头列宽”和“内容列宽”相等答案

【问题标题】：Fixed header table inside a scrollable div with equal 'table head column width' and 'content column width'修复了可滚动 div 内的标题表，“表头列宽”和“内容列宽”相等
【发布时间】：2015-04-30 01:23:28
【问题描述】：

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

我可以在 div 的顶部设置表头，但它不尊重溢出-x。并且表头列宽需要与内容的列相同。

我怎样才能做到这一点？

【问题讨论】：

发布您的源代码，以便我们更好地了解您的需求。
很抱歉它的代码很大。我需要进行很多编辑以使其更简单地发布在此处。我现在将编辑问题。

标签： javascript jquery css html

【解决方案1】：

这是一个演示Fixed Header Demo。

我探索了您的问题并得到了解决方案[我相信没有纯 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。

【讨论】：