固定可滾動div中的標頭表，其“表頭列寬度”和“內容列寬度”相等

Question

我在帶有Scroll-x和Scroll-y的div內有一張大桌子。 我想要的只是在y軸滾動時使表格標題固定。

我可以將表頭設置在div的頂部，但它不考慮溢出-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>

還要檢查我更新的小提琴 。