如何在頂級表THEAD修復與JS

我其實在做這個table，我需要固定在桌子上的頭thead的頂部，當你滾動表。在我的情況下，我需要通過JS或jQuery修復它，我不能編輯表格的HTML。如何在頂級表THEAD修復與JS

我試着用這個腳本沒有結果：

<script> 
    document.getElementById("tablepress-10").addEventListener("scroll", function() { 
    var translate = "translate(0," + this.scrollTop + "px)"; 
    this.querySelector("thead").style.transform = translate; 
}); 
</script>

這是HTML：

<div id="tablepress-10_wrapper"> 
<table>...</table> 
</div>

這是CSS：

#tablepress-10_wrapper { 
overflow: auto !important; 
height: 400px !important; 
}

的是我寫的不對任何想法？有小費嗎？

感謝您的建議。

PS：我使用WordPress的

來源

2016-07-28 podio

是[這]（https://stackoverflow.com/questions/38611581/fix-table-thead）你？ –

按照此鏈接，您將能夠解決您的問題。 http://stackoverflow.com/questions/673153/html-table-with-fixed-headers –

和[this]（http://stackoverflow.com/questions/38608935/fix-table-header-thead） –

我一直在尋找一個解決方案了一會兒，發現大多數答案都沒有工作或沒有適合我的情況，所以我寫了一個簡單的解決方案與jQuery的。

這是解決方案大綱。

克隆，其需要具有固定報頭，並把上的原始
頂部的克隆副本在表中從頂端表
從底部表中刪除表主體上拆下表頭

調整列寬度。（我們想起了原來的列寬）

<head> 
<script 
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"> 
</script> 
<script> 

function scrolify(tblAsJQueryObject, height){ 
var oTbl = tblAsJQueryObject; 

    // for very large tables you can remove the four lines below 
    // and wrap the table with <div> in the mark-up and assign 
    // height and overflow property 
var oTblDiv = $("<div/>"); 
oTblDiv.css('height', height); 
oTblDiv.css('overflow','scroll');    
oTbl.wrap(oTblDiv); 

// save original width 
oTbl.attr("data-item-original-width", oTbl.width()); 
oTbl.find('thead tr td').each(function(){ 
    $(this).attr("data-item-original-width",$(this).width()); 
}); 
oTbl.find('tbody tr:eq(0) td').each(function(){ 
    $(this).attr("data-item-original-width",$(this).width()); 
});     


// clone the original table 
var newTbl = oTbl.clone(); 

// remove table header from original table 
oTbl.find('thead tr').remove();     
// remove table body from new table 
newTbl.find('tbody tr').remove(); 

oTbl.parent().parent().prepend(newTbl); 
newTbl.wrap("<div/>"); 

// replace ORIGINAL COLUMN width     
newTbl.width(newTbl.attr('data-item-original-width')); 
newTbl.find('thead tr td').each(function(){ 
    $(this).width($(this).attr("data-item-original-width")); 
});  
oTbl.width(oTbl.attr('data-item-original-width'));  
oTbl.find('tbody tr:eq(0) td').each(function(){ 
    $(this).width($(this).attr("data-item-original-width")); 
});     
} 

$(document).ready(function(){ 
    scrolify($('#tblNeedsScrolling'), 160); // 160 is height 
}); 
</script> 
</head> 

<body> 
<div style="width:300px;border:6px green solid;"> 
<table border="1" width="100%" id="tblNeedsScrolling"> 
    <thead> 
     <tr><th>Header 1</th><th>Header 2</th></tr> 
    </thead> 
    <tbody> 
     <tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr> 
     <tr><td>row 2, cell 1</td><td>row 2, cell 2</td></tr> 
     <tr><td>row 3, cell 1</td><td>row 3, cell 2</td></tr> 
     <tr><td>row 4, cell 1</td><td>row 4, cell 2</td></tr>   
     <tr><td>row 5, cell 1</td><td>row 5, cell 2</td></tr> 
     <tr><td>row 6, cell 1</td><td>row 6, cell 2</td></tr> 
     <tr><td>row 7, cell 1</td><td>row 7, cell 2</td></tr> 
     <tr><td>row 8, cell 1</td><td>row 8, cell 2</td></tr>   
    </tbody> 
</table>

來源

2016-07-28 06:35:46

這不適用於我的情況... – podio

如何在頂級表THEAD修復與JS

回答

相關問題