How to fix on top table thead with JS

Question

i am actually working on this table and i need to fix on top of the table the header thead when you scroll the table. In my case i need to fix it via JS or jQuery and i can't edit the HTML of the table.

I tried with this script without results:

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

This is the HTML:

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

This is the CSS:

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

Any ideas of what i wrote wrong? Any tips?

Thanks in advice.

PS: I am using Wordpress

is [this](https://stackoverflow.com/questions/38611581/fix-table-thead) you? — Jaromanda X, Jul 28 '16 at 06:27
Follow this link and you will be able to solve your problem. http://stackoverflow.com/questions/673153/html-table-with-fixed-headers — Waqas_aamer, Jul 28 '16 at 06:29
and [this](http://stackoverflow.com/questions/38608935/fix-table-header-thead) — Jaromanda X, Jul 28 '16 at 06:29
@Waqas_aamer i followed exactly what they wrote, as you can see from my first post. But nothing... — podio, Jul 28 '16 at 07:45

score 0 · Answer 1 · answered Jul 28 '16 at 06:35

I was looking for a solution for this for a while and found most of the answers are not working or not suitable for my situation, so i wrote a simple solution with jquery.

this is the solution outline.

clone the table which needs to have fixed header and place the cloned copy on top of original
remove the table body from top table
remove the table header from bottom table

adjust the column widths. (we are remembering the original column widths)

 <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>

How to fix on top table thead with JS

1 Answers1