固定表頭和滾動表

我正在處理HTML表格，所有數據都來自後端，並且有大量的列，超過80+。我的要求是表頭將固定和滾動。我嘗試了很多東西，但不起作用。我嘗試了多個jQuery插件，它與我的頁面其他js衝突。所以，我想寫簡單的js，但它也不起作用。請幫我一把。固定表頭和滾動表

這裏是我的javascript代碼

var resizeCol = function() { 
    var tiw = $('.table-body .table').width(); 
    $('.table-head').width(tiw); 
    $('.table-body .table tr:first td').each(function (index, element) { 
     var w = $(this).width(), 
      i = $(this).index(); 
     $('.table-head th:eq(' + i + ')').width(w); 
    }); 
} 
resizeCol(); 
$(window).on("resize", function() { 
    resizeCol(); 
}); 

var scrollTarget = function() { 
    var target = $(".table-header"); 
    $(".table-body").scroll(function() { 
     target.prop("scrollLeft", this.scrollLeft); 
    }); 
} 



$tableInner = $('.table-body'); 
$tableInner.attr('style', 'overflow: auto; width: auto; height: 300px'); 

resizeCol(); 
scrollTarget();

DEMO

來源

2017-04-21 Anjyr

您的td/th的大小是固定的（百分比，px，em，...）還是自動的？ –

@ j-samah它會自動，因爲標題也動態綁定 – Anjyr

你試過'位置：粘性;'？我不確定它會在你的情況下工作。 –

試試這個代碼

var resizeCol = function() { 
    var body=$('.template_table').clone(); 
    body.addClass('body'); 
    $('.table-wrapper').append("<div class='table-body'></div>"); 
     $("table:first-child").wrap("<div class='table-head-scroll'></div>"); 
    $('.table-body').append(body); 
    var curr = []; 
    $("table.body th").each(function(i) { 
       var tColumnWidth = $(this).width(); 
       curr.push(tColumnWidth); 
    }); 
    $("table:first-child th").each(function(i){ 
     $(this).width(curr[i]); 
    }); 
    $("table.body td").each(function(i) { 
      $(this).width(curr[i]); 
    }); 
    $("table.body thead").hide(); 
    $("table").css('width','100%'); 
    $(".table-head-scroll>table tbody").empty(); 
} 
var scrollTarget = function() { 
    var target = $(".table-head-scroll"); 
    $(".table-body").scroll(function() { 
     target.prop("scrollLeft", this.scrollLeft); 
    }); 
} 
$(window).on("resize", function() { 
    resizeCol(); 
}); 
$(document).ready(function(){ 
resizeCol(); 
scrollTarget(); 
});

DEMO

來源

2017-04-21 06:40:58 Amal

不工作，你能修改我的代碼嗎？ – Anjyr

請參閱我的更新代碼 – Amal

滾動條進入標題 – Anjyr

我已經提出了兩個解決方案之一純粹在jQuery的基礎上和其他在css 。例如，我使用了bootstrap表。

jQuery的溶液：

document.getElementById("tablefixheader").addEventListener("scroll", function() { 
 
    var translate = "translate(0," + this.scrollTop + "px)"; 
 
    this.querySelector("thead").style.transform = translate; 
 

 
});

#tablefixheader { 
 
    overflow: auto; 
 
    height: 200px; 
 
} 
 

 
thead { 
 
    background: #fff; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<p>Dummy Data Dummy Data Dummy Data Dummy Data Dummy Data Dummy Data Dummy Data Dummy DataDummy Data Dummy Data Dummy Data Dummy Data Dummy Data Dummy Data Dummy DataDummy DataDummy DataDummy DataDummy DataDummy DataDummy DataDummy DataDummy Data </p> 
 
<div class="" id="tablefixheader"> 
 
    <table class="table "> 
 
    <thead> 
 
     <tr> 
 
     <th class="col-xs-1">#</th> 
 
     <th class="col-xs-4">First Name</th> 
 
     <th class="col-xs-4">Last Name</th> 
 
     <th class="col-xs-3">Username</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
     <td class="col-xs-1">3</td> 
 
     <td class="col-xs-4">Mark</td> 
 
     <td class="col-xs-4">Otto</td> 
 
     <td class="col-xs-3">@mdo</td> 
 
     </tr> 
 
     <tr> 
 
     <td class="col-xs-1">3</td> 
 
     <td class="col-xs-4">Mark</td> 
 
     <td class="col-xs-4">Otto</td> 
 
     <td class="col-xs-3">@mdo</td> 
 
     </tr> 
 
     <tr> 
 
     <td class="col-xs-1">3</td> 
 
     <td class="col-xs-4">Mark</td> 
 
     <td class="col-xs-4">Otto</td> 
 
     <td class="col-xs-3">@mdo</td> 
 
     </tr> 
 
     <tr> 
 
     <td class="col-xs-1">3</td> 
 
     <td class="col-xs-4">Mark</td> 
 
     <td class="col-xs-4">Otto</td> 
 
     <td class="col-xs-3">@mdo</td> 
 
     </tr> 
 
     <tr> 
 
     <td class="col-xs-1">3</td> 
 
     <td class="col-xs-4">Mark</td> 
 
     <td class="col-xs-4">Otto</td> 
 
     <td class="col-xs-3">@mdo</td> 
 
     </tr> 
 
     <tr> 
 
     <td class="col-xs-1">3</td> 
 
     <td class="col-xs-4">Mark</td> 
 
     <td class="col-xs-4">Otto</td> 
 
     <td class="col-xs-3">@mdo</td> 
 
     </tr> 
 
     <tr> 
 
     <td class="col-xs-1">3</td> 
 
     <td class="col-xs-4">Mark</td> 
 
     <td class="col-xs-4">Otto</td> 
 
     <td class="col-xs-3">@mdo</td> 
 
     </tr> 
 
     <tr> 
 
     <td class="col-xs-1">3</td> 
 
     <td class="col-xs-4">Mark</td> 
 
     <td class="col-xs-4">Otto</td> 
 
     <td class="col-xs-3">@mdo</td> 
 
     </tr> 
 
     <tr> 
 
     <td class="col-xs-1">3</td> 
 
     <td class="col-xs-4">Mark</td> 
 
     <td class="col-xs-4">Otto</td> 
 
     <td class="col-xs-3">@mdo</td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div>

CSS的溶液：

.table-fixed thead { 
 
    width: 97%; 
 
} 
 

 
.table-fixed tbody { 
 
    height: 230px; 
 
    overflow-y: auto; 
 
    width: 100%; 
 
} 
 

 
.table-fixed thead, 
 
.table-fixed tbody, 
 
.table-fixed tr, 
 
.table-fixed td, 
 
.table-fixed th { 
 
    display: block !important; 
 
    float: left !important; 
 
} 
 

 
.table-fixed tbody td, 
 
.table-fixed thead>tr>th { 
 
    float: left; 
 
    border-bottom-width: 0; 
 
} 
 

 
.table-fixed tr { 
 
    width: 100%; 
 
    float: left; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="panel panel-default"> 
 
    <table class="table table-fixed"> 
 
    <thead> 
 
     <tr> 
 
     <th class="col-xs-1">#</th> 
 
     <th class="col-xs-4">First Name</th> 
 
     <th class="col-xs-4">Last Name</th> 
 
     <th class="col-xs-3">Username</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
     <td class="col-xs-1">3</td> 
 
     <td class="col-xs-4">Mark</td> 
 
     <td class="col-xs-4">Otto</td> 
 
     <td class="col-xs-3">@mdo</td> 
 
     </tr> 
 
     <tr> 
 
     <td class="col-xs-1">3</td> 
 
     <td class="col-xs-4">Mark</td> 
 
     <td class="col-xs-4">Otto</td> 
 
     <td class="col-xs-3">@mdo</td> 
 
     </tr> 
 
     <tr> 
 
     <td class="col-xs-1">3</td> 
 
     <td class="col-xs-4">Mark</td> 
 
     <td class="col-xs-4">Otto</td> 
 
     <td class="col-xs-3">@mdo</td> 
 
     </tr> 
 
     <tr> 
 
     <td class="col-xs-1">3</td> 
 
     <td class="col-xs-4">Mark</td> 
 
     <td class="col-xs-4">Otto</td> 
 
     <td class="col-xs-3">@mdo</td> 
 
     </tr> 
 
     <tr> 
 
     <td class="col-xs-1">3</td> 
 
     <td class="col-xs-4">Mark</td> 
 
     <td class="col-xs-4">Otto</td> 
 
     <td class="col-xs-3">@mdo</td> 
 
     </tr> 
 
     <tr> 
 
     <td class="col-xs-1">3</td> 
 
     <td class="col-xs-4">Mark</td> 
 
     <td class="col-xs-4">Otto</td> 
 
     <td class="col-xs-3">@mdo</td> 
 
     </tr> 
 
     <tr> 
 
     <td class="col-xs-1">3</td> 
 
     <td class="col-xs-4">Mark</td> 
 
     <td class="col-xs-4">Otto</td> 
 
     <td class="col-xs-3">@mdo</td> 
 
     </tr> 
 
     <tr> 
 
     <td class="col-xs-1">3</td> 
 
     <td class="col-xs-4">Mark</td> 
 
     <td class="col-xs-4">Otto</td> 
 
     <td class="col-xs-3">@mdo</td> 
 
     </tr> 
 
     <tr> 
 
     <td class="col-xs-1">3</td> 
 
     <td class="col-xs-4">Mark</td> 
 
     <td class="col-xs-4">Otto</td> 
 
     <td class="col-xs-3">@mdo</td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div>

來源

2017-04-21 07:32:18

固定表頭和滾動表

回答

相關問題