Table header to stay fixed at the top when user scrolls it out of view with jQuery

Question

I am trying to design an HTML table where the header will stay at the top of the page when AND ONLY when the user scrolls it out of view. For example, the table may be 500 pixels down from the page, how do I make it so that if the user scrolls the header out of view (browser detects its no longer in the windows view somehow), it will stay put at the top? Anyone can give me a Javascript solution to this?

<table>
  <thead>
    <tr>
      <th>Col1</th>
      <th>Col2</th>
      <th>Col3</th>
    </tr>
  </thead>
  <tbody>
     <tr>
       <td>info</td>
       <td>info</td>
       <td>info</td>
     </tr>
     <tr>
       <td>info</td>
       <td>info</td>
       <td>info</td>
     </tr>
     <tr>
       <td>info</td>
       <td>info</td>
       <td>info</td>
     </tr>
  </tbody>
</table>

So in the above example, I want the <thead> to scroll with the page if it goes out of view.

IMPORTANT: I am NOT looking for a solution where the <tbody> will have a scrollbar (overflow:auto).

This question is related to jquery html html-table

User · Answer

x000D   x000D  div wrapper   x000D      padding 20px  x000D    x000D  table scroll thead   x000D      width  100   x000D      background   FC6822  x000D    x000D  table scroll thead tr after   x000D      content      x000D      overflow-y  scroll  x000D      visibility  hidden  x000D    x000D  table scroll thead th   x000D      flex  1 auto  x000D      display  block  x000D      color   fff  x000D    x000D  table scroll tbody   x000D      display  block  x000D      width  100   x000D      overflow-y  auto  x000D      height  auto  x000D      max-height  200px  x000D    x000D  table scroll thead tr  x000D  table scroll tbody tr   x000D      display  flex  x000D    x000D  table scroll tbody tr td   x000D      flex  1 auto  x000D      word-wrap  break  x000D    x000D  table scroll thead tr th  x000D  table scroll tbody tr td   x000D      width  25   x000D      padding  5px  x000D      text-align-left  x000D      border-bottom  1px solid rgba 0 0 0 0 3   x000D    x000D   lt div class  wrapper  gt  x000D       lt table border  0  cellpadding  0  cellspacing  0  class  scroll  gt  x000D           lt thead gt  x000D               lt tr gt  x000D                   lt th gt Name lt  th gt  x000D                   lt th gt Vorname lt  th gt  x000D                   lt th gt Beruf lt  th gt  x000D                   lt th gt Alter lt  th gt  x000D               lt  tr gt  x000D           lt  thead gt  x000D           lt tbody gt  x000D               lt tr gt  x000D                   lt td gt M  ller lt  td gt  x000D                   lt td gt Marie lt  td gt  x000D                   lt td gt K  nstlerin lt  td gt  x000D                   lt td gt 26 lt  td gt  x000D               lt  tr gt  x000D               lt tr gt  x000D                   lt td gt Meier lt  td gt  x000D                   lt td gt Stefan lt  td gt  x000D                   lt td gt Chemiker lt  td gt  x000D                   lt td gt 52 lt  td gt  x000D               lt  tr gt  x000D               lt tr gt  x000D                   lt td gt Schmidt lt  td gt  x000D                   lt td gt Sabrine lt  td gt  x000D                   lt td gt Studentin lt  td gt  x000D                   lt td gt 38 lt  td gt  x000D               lt  tr gt  x000D               lt tr gt  x000D                   lt td gt Mustermann lt  td gt  x000D                   lt td gt Max lt  td gt  x000D                   lt td gt Lehrer lt  td gt  x000D                   lt td gt 41 lt  td gt  x000D               lt  tr gt  x000D               lt tr gt  x000D                   lt td gt M  ller lt  td gt  x000D                   lt td gt Marie lt  td gt  x000D                   lt td gt K  nstlerin lt  td gt  x000D                   lt td gt 26 lt  td gt  x000D               lt  tr gt  x000D               lt tr gt  x000D                   lt td gt Meier lt  td gt  x000D                   lt td gt Stefan lt  td gt  x000D                   lt td gt Chemiker lt  td gt  x000D                   lt td gt 52 lt  td gt  x000D               lt  tr gt  x000D               lt tr gt  x000D                   lt td gt Schmidt lt  td gt  x000D                   lt td gt Sabrine lt  td gt  x000D                   lt td gt Studentin lt  td gt  x000D                   lt td gt 38 lt  td gt  x000D               lt  tr gt  x000D               lt tr gt  x000D                   lt td gt Mustermann lt  td gt  x000D                   lt td gt Max lt  td gt  x000D                   lt td gt Lehrer lt  td gt  x000D                   lt td gt 41 lt  td gt  x000D               lt  tr gt  x000D               lt tr gt  x000D                   lt td gt M  ller lt  td gt  x000D                   lt td gt Marie lt  td gt  x000D                   lt td gt K  nstlerin lt  td gt  x000D                   lt td gt 26 lt  td gt  x000D               lt  tr gt  x000D               lt tr gt  x000D                   lt td gt Meier lt  td gt  x000D                   lt td gt Stefan lt  td gt  x000D                   lt td gt Chemiker lt  td gt  x000D                   lt td gt 52 lt  td gt  x000D               lt  tr gt  x000D               lt tr gt  x000D                   lt td gt Schmidt lt  td gt  x000D                   lt td gt Sabrine lt  td gt  x000D                   lt td gt Studentin lt  td gt  x000D                   lt td gt 38 lt  td gt  x000D               lt  tr gt  x000D               lt tr gt  x000D                   lt td gt Mustermann lt  td gt  x000D                   lt td gt Max lt  td gt  x000D                   lt td gt Lehrer lt  td gt  x000D                   lt td gt 41 lt  td gt  x000D               lt  tr gt  x000D           lt  tbody gt  x000D       lt  table gt  x000D   lt  div gt  x000D   x000D   x000D    Demo  css fixed table header demo

User · Answer

Fix your issue with this  tbody     display  table-caption    height  200px    caption-side  bottom    overflow  auto

User · Answer

This can be achieved by using style property transform. All you have to do is wrapping your table into some div with fixed height and overflow set to auto, for example:

.tableWrapper {
  overflow: auto;
  height: calc( 100% - 10rem );
}

And then you can attach onscroll handler to it, here you have method that finds each table wrapped with <div class="tableWrapper"></div>:

  fixTables () {
    document.querySelectorAll('.tableWrapper').forEach((tableWrapper) => {
      tableWrapper.addEventListener('scroll', () => {
        var translate = 'translate(0,' + tableWrapper.scrollTop + 'px)'
        tableWrapper.querySelector('thead').style.transform = translate
      })
    })
  }

And here is working example of this in action (i have used bootstrap to make it prettier): fiddle

For those who also want to support IE and Edge, here is the snippet:

  fixTables () {
    const tableWrappers = document.querySelectorAll('.tableWrapper')
    for (let i = 0, len = tableWrappers.length; i < len; i++) {
      tableWrappers[i].addEventListener('scroll', () => {
        const translate = 'translate(0,' + tableWrappers[i].scrollTop + 'px)'
        const headers = tableWrappers[i].querySelectorAll('thead th')
        for (let i = 0, len = headers.length; i < len; i++) {
          headers[i].style.transform = translate
        }
      })
    }
  }

In IE and Edge scroll is a little bit laggy... but it works

Here is answer which helps me to find out this: answer

User · Answer

I wrote a plugin that does this  Ive been working on it for about a year now and I think it handles all the corner cases pretty well    scrolling within a container with overflow  scrolling within a window taking care of what happens when you resize the window keeping your events bound to the header most importantly it doesn t force you to change your table s css to make it work   Here are some demos docs  http   mkoryak github io floatThead

User · Answer

Well  after reviewing all available solutions I wrote plugin which can freeze any row  not only th  at the top of page or container  It s very simple and very fast  Feel free to use it  http   maslianok github io stickyRows

User · Answer

I too experienced the same issues with the border formatting not being shown using entrophy's code but a few little fixes and now the table is expandable and displays all css styling rules you may add.

to css add:

#maintable{width: 100%}

then here is the new javascript:

    function moveScroll(){
    var scroll = $(window).scrollTop();
    var anchor_top = $("#maintable").offset().top;
    var anchor_bottom = $("#bottom_anchor").offset().top;
    if (scroll > anchor_top && scroll < anchor_bottom) {
        clone_table = $("#clone");
        if(clone_table.length === 0) {          
            clone_table = $("#maintable").clone();
            clone_table.attr({id: "clone"})
            .css({
                position: "fixed",
                "pointer-events": "none",
                 top:0
            })
            .width($("#maintable").width());

            $("#table-container").append(clone_table);
            // dont hide the whole table or you lose border style & 
            // actively match the inline width to the #maintable width if the 
            // container holding the table (window, iframe, div) changes width          
            $("#clone").width($("#maintable").width());
            // only the clone thead remains visible
            $("#clone thead").css({
                visibility:"visible"
            });
            // clone tbody is hidden
            $("#clone tbody").css({
                visibility:"hidden"
            });
            // add support for a tfoot element
            // and hide its cloned version too
            var footEl = $("#clone tfoot");
            if(footEl.length){
                footEl.css({
                    visibility:"hidden"
                });
            }
        }
    } 
    else {
        $("#clone").remove();
    }
}
$(window).scroll(moveScroll);

User · Answer

I found a simple jQuery library called Sticky Table Headers. Two lines of code and it did exactly what I wanted. The solutions above don't manage the column widths, so if you have table cells that take up a lot of space, the resulting size of the persistent header will not match your table's width.

http://plugins.jquery.com/StickyTableHeaders/

Usage info here: https://github.com/jmosbech/StickyTableHeaders

User · Answer

This is by far the best solution I ve found for having a fixed table header   UPDATE 5 11  Fixed horizontal scrolling bug as pointed out by Kerry Johnson  Codepen  https   codepen io josephting pen demELL   x000D   x000D    function      x000D       fn fixMe   function     x000D        return this each function     x000D           var  this     this   x000D               t fixed  x000D           function init     x000D               this wrap   lt div class  container    gt     x000D               t fixed    this clone    x000D               t fixed find  tbody   remove   end   addClass  fixed   insertBefore  this   x000D              resizeFixed    x000D             x000D           function resizeFixed     x000D              t fixed width  this outerWidth     x000D               t fixed find  th   each function index    x000D                   this  css  width   this find  th   eq index  outerWidth    px    x000D                  x000D             x000D           function scrollFixed     x000D              var offsetY     this  scrollTop    x000D              offsetX     this  scrollLeft    x000D              tableOffsetTop    this offset   top  x000D              tableOffsetBottom   tableOffsetTop    this height   -  this find  thead   height    x000D              tableOffsetLeft    this offset   left  x000D              if offsetY  lt  tableOffsetTop    offsetY  gt  tableOffsetBottom  x000D                  t fixed hide    x000D              else if offsetY  gt   tableOffsetTop  amp  amp  offsetY  lt   tableOffsetBottom  amp  amp   t fixed is   hidden    x000D                  t fixed show    x000D               t fixed css  left   tableOffsetLeft - offsetX    px    x000D             x000D             window  resize resizeFixed   x000D             window  scroll scrollFixed   x000D           init    x000D            x000D        x000D     jQuery   x000D   x000D    document  ready function    x000D        table   fixMe    x000D         up   click function     x000D           html  body   animate   x000D        scrollTop  0 x000D        2000   x000D       x000D      x000D  body  x000D    font 1 2em normal Arial sans-serif  x000D    color  34495E  x000D    x000D   x000D  h1  x000D    text-align center  x000D    text-transform uppercase  x000D    letter-spacing -2px  x000D    font-size 2 5em  x000D    margin 20px 0  x000D    x000D   x000D   container  x000D    width 90   x000D    margin auto  x000D    x000D   x000D  table  x000D    border-collapse collapse  x000D    width 100   x000D    x000D   x000D   blue  x000D    border 2px solid  1ABC9C  x000D    x000D   x000D   blue thead  x000D    background  1ABC9C  x000D    x000D   x000D   purple  x000D    border 2px solid  9B59B6  x000D    x000D   x000D   purple thead  x000D    background  9B59B6  x000D    x000D   x000D  thead  x000D    color white  x000D    x000D   x000D  th td  x000D    text-align center  x000D    padding 5px 0  x000D    x000D   x000D  tbody tr nth-child even   x000D    background  ECF0F1  x000D    x000D   x000D  tbody tr hover  x000D  background  BDC3C7  x000D    color  FFFFFF  x000D    x000D   x000D   fixed  x000D    top 0  x000D    position fixed  x000D    width auto  x000D    display none  x000D    border none  x000D    x000D   x000D   scrollMore  x000D    margin-top 600px  x000D    x000D   x000D   up  x000D    cursor pointer  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt h1 gt  amp darr  SCROLL  amp darr  lt  h1 gt  x000D   lt table class  blue  gt  x000D     lt thead gt  x000D       lt tr gt  x000D         lt th gt Colonne 1 lt  th gt  x000D         lt th gt Colonne 2 lt  th gt  x000D         lt th gt Colonne 3 lt  th gt  x000D       lt  tr gt  x000D     lt  thead gt  x000D     lt tbody gt  x000D       lt tr gt  x000D         lt td gt Non lt  td gt  x000D         lt td gt MaisMaisMaisMaisMaisMaisMaisMaisMaisMaisMaisMaisMaisMaisMaisMaisMaisMaisMaisMais lt  td gt  x000D         lt td gt Allo   lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt Non lt  td gt  x000D         lt td gt Mais lt  td gt  x000D         lt td gt Allo   lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt Non lt  td gt  x000D         lt td gt Mais lt  td gt  x000D         lt td gt Allo   lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt Non lt  td gt  x000D         lt td gt Mais lt  td gt  x000D         lt td gt Allo   lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt Non lt  td gt  x000D         lt td gt Mais lt  td gt  x000D         lt td gt Allo   lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt Non lt  td gt  x000D         lt td gt Mais lt  td gt  x000D         lt td gt Allo   lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt Non lt  td gt  x000D         lt td gt Mais lt  td gt  x000D         lt td gt Allo   lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt Non lt  td gt  x000D         lt td gt Mais lt  td gt  x000D         lt td gt Allo   lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt Non lt  td gt  x000D         lt td gt Mais lt  td gt  x000D         lt td gt Allo   lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt Non lt  td gt  x000D         lt td gt Mais lt  td gt  x000D         lt td gt Allo   lt  td gt  x000D       lt  tr gt  x000D          lt tr gt  x000D         lt td gt Non lt  td gt  x000D         lt td gt Mais lt  td gt  x000D         lt td gt Allo   lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt Non lt  td gt  x000D         lt td gt Mais lt  td gt  x000D         lt td gt Allo   lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt Non lt  td gt  x000D         lt td gt Mais lt  td gt  x000D         lt td gt Allo   lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt Non lt  td gt  x000D         lt td gt Mais lt  td gt  x000D         lt td gt Allo   lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt Non lt  td gt  x000D         lt td gt Mais lt  td gt  x000D         lt td gt Allo   lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt Non lt  td gt  x000D         lt td gt Mais lt  td gt  x000D         lt td gt Allo   lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt Non lt  td gt  x000D         lt td gt Mais lt  td gt  x000D         lt td gt Allo   lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt Non lt  td gt  x000D         lt td gt Mais lt  td gt  x000D         lt td gt Allo   lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt Non lt  td gt  x000D         lt td gt Mais lt  td gt  x000D         lt td gt Allo   lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt Non lt  td gt  x000D         lt td gt Mais lt  td gt  x000D         lt td gt Allo   lt  td gt  x000D       lt  tr gt  x000D     lt  tbody gt  x000D   lt  table gt  x000D   x000D   lt h1 class  scrollMore  gt  amp darr  SCROLL MORE  amp darr  lt  h1 gt  x000D   lt table class  purple  gt  x000D     lt thead gt  x000D       lt tr gt  x000D         lt th gt Colonne 1 lt  th gt  x000D         lt th gt Colonne 2 lt  th gt  x000D         lt th gt Colonne 3 lt  th gt  x000D       lt  tr gt  x000D     lt  thead gt  x000D     lt tbody gt  x000D       lt tr gt  x000D         lt td gt Non lt  td gt  x000D         lt td gt Mais lt  td gt  x000D         lt td gt Allo   lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt Non lt  td gt  x000D         lt td gt Mais lt  td gt  x000D         lt td gt Allo   lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt Non lt  td gt  x000D         lt td gt Mais lt  td gt  x000D         lt td gt Allo   lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt Non lt  td gt  x000D         lt td gt Mais lt  td gt  x000D         lt td gt Allo   lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt Non lt  td gt  x000D         lt td gt Mais lt  td gt  x000D         lt td gt Allo   lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt Non lt  td gt  x000D         lt td gt Mais lt  td gt  x000D         lt td gt Allo   lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt Non lt  td gt  x000D         lt td gt Mais lt  td gt  x000D         lt td gt Allo   lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt Non lt  td gt  x000D         lt td gt Mais lt  td gt  x000D         lt td gt Allo   lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt Non lt  td gt  x000D         lt td gt Mais lt  td gt  x000D         lt td gt Allo   lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt Non lt  td gt  x000D         lt td gt Mais lt  td gt  x000D         lt td gt Allo   lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt Non lt  td gt  x000D         lt td gt Mais lt  td gt  x000D         lt td gt Allo   lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt Non lt  td gt  x000D         lt td gt Mais lt  td gt  x000D         lt td gt Allo   lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt Non lt  td gt  x000D         lt td gt Mais lt  td gt  x000D         lt td gt Allo   lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt Non lt  td gt  x000D         lt td gt Mais lt  td gt  x000D         lt td gt Allo   lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt Non lt  td gt  x000D         lt td gt Mais lt  td gt  x000D         lt td gt Allo   lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt Non lt  td gt  x000D         lt td gt Mais lt  td gt  x000D         lt td gt Allo   lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt Non lt  td gt  x000D         lt td gt Mais lt  td gt  x000D         lt td gt Allo   lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt Non lt  td gt  x000D         lt td gt Mais lt  td gt  x000D         lt td gt Allo   lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt Non lt  td gt  x000D         lt td gt Mais lt  td gt  x000D         lt td gt Allo   lt  td gt  x000D       lt  tr gt  x000D          lt tr gt  x000D         lt td gt Non lt  td gt  x000D         lt td gt Mais lt  td gt  x000D         lt td gt Allo   lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt Non lt  td gt  x000D         lt td gt Mais lt  td gt  x000D         lt td gt Allo   lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt Non lt  td gt  x000D         lt td gt Mais lt  td gt  x000D         lt td gt Allo   lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt Non lt  td gt  x000D         lt td gt Mais lt  td gt  x000D         lt td gt Allo   lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt Non lt  td gt  x000D         lt td gt Mais lt  td gt  x000D         lt td gt Allo   lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt Non lt  td gt  x000D         lt td gt Mais lt  td gt  x000D         lt td gt Allo   lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt Non lt  td gt  x000D         lt td gt Mais lt  td gt  x000D         lt td gt Allo   lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt Non lt  td gt  x000D         lt td gt Mais lt  td gt  x000D         lt td gt Allo   lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt Non lt  td gt  x000D         lt td gt Mais lt  td gt  x000D         lt td gt Allo   lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt Non lt  td gt  x000D         lt td gt Mais lt  td gt  x000D         lt td gt Allo   lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt Non lt  td gt  x000D         lt td gt Mais lt  td gt  x000D         lt td gt Allo   lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt Non lt  td gt  x000D         lt td gt Mais lt  td gt  x000D         lt td gt Allo   lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt Non lt  td gt  x000D         lt td gt Mais lt  td gt  x000D         lt td gt Allo   lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt Non lt  td gt  x000D         lt td gt Mais lt  td gt  x000D         lt td gt Allo   lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt Non lt  td gt  x000D         lt td gt Mais lt  td gt  x000D         lt td gt Allo   lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt Non lt  td gt  x000D         lt td gt Mais lt  td gt  x000D         lt td gt Allo   lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt Non lt  td gt  x000D         lt td gt Mais lt  td gt  x000D         lt td gt Allo   lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt Non lt  td gt  x000D         lt td gt Mais lt  td gt  x000D         lt td gt Allo   lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt Non lt  td gt  x000D         lt td gt Mais lt  td gt  x000D         lt td gt Allo   lt  td gt  x000D       lt  tr gt  x000D          lt tr gt  x000D         lt td gt Non lt  td gt  x000D         lt td gt Mais lt  td gt  x000D         lt td gt Allo   lt  td gt  x000D       lt  tr gt  x000D     lt  tbody gt  x000D   lt  table gt  x000D   lt h1 class  up scrollMore  gt  amp uarr  UP  amp uarr  lt  h1 gt  x000D   x000D   x000D

User · Answer

In this solution fixed header is created dynamically, the content and style is cloned from THEAD

all you need is two lines for example:

var $myfixedHeader = $("#Ttodo").FixedHeader(); //create fixed header $(window).scroll($myfixedHeader.moveScroll); //bind function to scroll event

My jquery plugin FixedHeader and getStyleObject provided below you can to put in the file .js

_x000D_

// JAVASCRIPT_x000D_
_x000D_
_x000D_
_x000D_
/*_x000D_
 * getStyleObject Plugin for jQuery JavaScript Library_x000D_
 * From: http://upshots.org/?p=112_x000D_
 _x000D_
Basic usage:_x000D_
$.fn.copyCSS = function(source){_x000D_
  var styles = $(source).getStyleObject();_x000D_
  this.css(styles);_x000D_
}_x000D_
*/_x000D_
_x000D_
(function($){_x000D_
    $.fn.getStyleObject = function(){_x000D_
        var dom = this.get(0);_x000D_
        var style;_x000D_
        var returns = {};_x000D_
        if(window.getComputedStyle){_x000D_
            var camelize = function(a,b){_x000D_
                return b.toUpperCase();_x000D_
            };_x000D_
            style = window.getComputedStyle(dom, null);_x000D_
            for(var i = 0, l = style.length; i < l; i++){_x000D_
                var prop = style[i];_x000D_
                var camel = prop.replace(/\-([a-z])/g, camelize);_x000D_
                var val = style.getPropertyValue(prop);_x000D_
                returns[camel] = val;_x000D_
            };_x000D_
            return returns;_x000D_
        };_x000D_
        if(style = dom.currentStyle){_x000D_
            for(var prop in style){_x000D_
                returns[prop] = style[prop];_x000D_
            };_x000D_
            return returns;_x000D_
        };_x000D_
        return this.css();_x000D_
    }_x000D_
})(jQuery);_x000D_
_x000D_
_x000D_
_x000D_
   _x000D_
//Floating Header of long table  PiotrC_x000D_
(function ( $ ) {_x000D_
    var tableTop,tableBottom,ClnH;_x000D_
    $.fn.FixedHeader = function(){_x000D_
        tableTop=this.offset().top,_x000D_
        tableBottom=this.outerHeight()+tableTop;_x000D_
        //Add Fixed header_x000D_
        this.after('<table id="fixH"></table>');_x000D_
        //Clone Header_x000D_
        ClnH=$("#fixH").html(this.find("thead").clone());_x000D_
        //set style_x000D_
        ClnH.css({'position':'fixed', 'top':'0', 'zIndex':'60', 'display':'none',_x000D_
        'border-collapse': this.css('border-collapse'),_x000D_
  'border-spacing': this.css('border-spacing'),_x000D_
        'margin-left': this.css('margin-left'),_x000D_
        'width': this.css('width')            _x000D_
        });_x000D_
        //rewrite style cell of header_x000D_
        $.each(this.find("thead>tr>th"), function(ind,val){_x000D_
            $(ClnH.find('tr>th')[ind]).css($(val).getStyleObject());_x000D_
        });_x000D_
    return ClnH;}_x000D_
    _x000D_
    $.fn.moveScroll=function(){_x000D_
        var offset = $(window).scrollTop();_x000D_
        if (offset > tableTop && offset<tableBottom){_x000D_
            if(ClnH.is(":hidden"))ClnH.show();_x000D_
            $("#fixH").css('margin-left',"-"+$(window).scrollLeft()+"px");_x000D_
        }_x000D_
        else if (offset < tableTop || offset>tableBottom){_x000D_
            if(!ClnH.is(':hidden'))ClnH.hide();_x000D_
        }_x000D_
    };_x000D_
})( jQuery );_x000D_
_x000D_
_x000D_
_x000D_
_x000D_
_x000D_
var $myfixedHeader = $("#repTb").FixedHeader();_x000D_
$(window).scroll($myfixedHeader.moveScroll);

_x000D_

/* CSS - important only NOT transparent background */_x000D_
_x000D_
#repTB{border-collapse: separate;border-spacing: 0;}_x000D_
_x000D_
#repTb thead,#fixH thead{background: #e0e0e0 linear-gradient(#d8d8d8 0%, #e0e0e0 25%, #e0e0e0 75%, #d8d8d8 100%) repeat scroll 0 0;border:1px solid #CCCCCC;}_x000D_
_x000D_
#repTb td{border:1px solid black}

_x000D_

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>_x000D_
_x000D_
_x000D_
<h3>example</h3> _x000D_
<table id="repTb">_x000D_
<thead>_x000D_
<tr><th>Col1</th><th>Column2</th><th>Description</th></tr>_x000D_
</thead>_x000D_
<tr><td>info</td><td>info</td><td>info</td></tr>_x000D_
<tr><td>info</td><td>info</td><td>info</td></tr>_x000D_
<tr><td>info</td><td>info</td><td>info</td></tr>_x000D_
<tr><td>info</td><td>info</td><td>info</td></tr>_x000D_
<tr><td>info</td><td>info</td><td>info</td></tr>_x000D_
<tr><td>info</td><td>info</td><td>info</td></tr>_x000D_
<tr><td>info</td><td>info</td><td>info</td></tr>_x000D_
<tr><td>info</td><td>info</td><td>info</td></tr>_x000D_
<tr><td>info</td><td>info</td><td>info</td></tr>_x000D_
<tr><td>info</td><td>info</td><td>info</td></tr>_x000D_
<tr><td>info</td><td>info</td><td>info</td></tr>_x000D_
</table>

_x000D_

User · Answer

You would do something like this by tapping into the scroll event handler on window  and using another table with a fixed position to show the header at the top of the page   HTML    lt table id  header-fixed  gt  lt  table gt    CSS    header-fixed       position  fixed      top  0px  display none      background-color white      JavaScript   var tableOffset       table-1   offset   top  var  header       table-1  gt  thead   clone    var  fixedHeader       header-fixed   append  header      window  bind  scroll   function         var offset     this  scrollTop         if  offset  gt   tableOffset  amp  amp   fixedHeader is   hidden               fixedHeader show              else if  offset  lt  tableOffset             fixedHeader hide                This will show the table head when the user scrolls down far enough to hide the original table head   It will hide again when the user has scrolled the page up far enough again   Working example  http   jsfiddle net andrewwhitaker fj8wM

User · Answer

I have tried it using transformation translate  While it works good in Firefox and Chrome  there is simply no function in IE11  No double scroll bars  Supports table tfoot and caption  Pure Javascript  no jQuery   http   jsfiddle net wbLqzrfb 42   thead style transform  translate 0    dY-top-1   px

User · Answer

you can use this approach  pure HTML and CSS no JS needed        x000D   x000D   table-fixed-header   x000D    display  flex  x000D    justify-content  space-between  x000D    margin-right  18px x000D    x000D   x000D   table-fixed   x000D    display  flex  x000D    justify-content  space-between  x000D    height  150px  x000D    overflow  scroll  x000D    x000D   x000D   column   x000D    flex-basis  24   x000D    border-radius  5px  x000D    padding  5px  x000D    text-align  center  x000D    x000D   column  title   x000D    border-bottom  2px grey solid  x000D    border-top  2px grey solid  x000D    text-align  center  x000D    display  block  x000D    font-weight  bold  x000D    x000D   x000D   cell   x000D    padding  5px  x000D    border-right  1px solid  x000D    border-left  1px solid  x000D    x000D   x000D   cell nth-of-type even    x000D    background-color  lightgrey  x000D    x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D   lt head gt  x000D     lt meta charset  utf-8  gt  x000D     lt meta name  viewport  content  width device-width  gt  x000D     lt title gt Fixed header Bin lt  title gt  x000D   lt  head gt  x000D   lt body gt  x000D   lt div class  table-fixed-header  gt  x000D       x000D       lt div class  column  gt  x000D         lt span class  title  gt col 1 lt  span gt  x000D       lt  div gt  x000D       lt div class  column  gt  x000D         lt span class  title  gt col 2 lt  span gt  x000D       lt  div gt  x000D       lt div class  column  gt  x000D         lt span class  title  gt col 3 lt  span gt  x000D       lt  div gt  x000D       lt div class  column  gt  x000D         lt span class  title  gt col 4 lt  span gt  x000D       lt  div gt  x000D       x000D     lt  div gt  x000D     x000D     lt div class  table-fixed  gt  x000D       x000D       lt div class  column  gt  x000D         lt div class  cell  gt alpha lt  div gt  x000D         lt div class  cell  gt beta lt  div gt  x000D         lt div class  cell  gt ceta lt  div gt  x000D       lt  div gt  x000D       x000D       lt div class  column  gt  x000D         lt div class  cell  gt alpha lt  div gt  x000D         lt div class  cell  gt beta lt  div gt  x000D         lt div class  cell  gt ceta lt  div gt  x000D         lt div class  cell  gt alpha lt  div gt  x000D         lt div class  cell  gt beta lt  div gt  x000D         lt div class  cell  gt ceta lt  div gt  x000D         lt div class  cell  gt alpha lt  div gt  x000D         lt div class  cell  gt beta lt  div gt  x000D         lt div class  cell  gt ceta lt  div gt  x000D       lt  div gt  x000D       x000D       lt div class  column  gt  x000D         lt div class  cell  gt alpha lt  div gt  x000D         lt div class  cell  gt beta lt  div gt  x000D         lt div class  cell  gt ceta lt  div gt  x000D         lt div class  cell  gt beta lt  div gt  x000D         lt div class  cell  gt beta lt  div gt  x000D         lt div class  cell  gt beta lt  div gt  x000D         x000D       lt  div gt  x000D       x000D       lt div class  column  gt  x000D         lt div class  cell  gt alpha lt  div gt  x000D         lt div class  cell  gt beta lt  div gt  x000D         lt div class  cell  gt ceta lt  div gt  x000D       lt  div gt  x000D       x000D     lt  div gt  x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

Here is a solution that builds upon the accepted answer. It corrects for: column widths, matching table style, and when the table is scrolled in a container div.

Usage

Ensure your table has a <thead> tag because only thead content will be fixed.

$("#header-fixed").fixHeader();

JavaSript

//Custom JQuery Plugin
(function ($) {
    $.fn.fixHeader = function () {
        return this.each(function () {
            var $table = $(this);
            var $sp = $table.scrollParent();
            var tableOffset = $table.position().top;
            var $tableFixed = $("<table />")
                .prop('class', $table.prop('class'))
                .css({ position: "fixed", "table-layout": "fixed", display: "none", "margin-top": "0px" });
            $table.before($tableFixed);
            $tableFixed.append($table.find("thead").clone());

            $sp.bind("scroll", function () {
                var offset = $(this).scrollTop();

                if (offset > tableOffset && $tableFixed.is(":hidden")) {
                    $tableFixed.show();
                    var p = $table.position();
                    var offset = $sp.offset();

                    //Set the left and width to match the source table and the top to match the scroll parent
                    $tableFixed.css({ left: p.left + "px", top: (offset ? offset.top : 0) + "px", }).width($table.width());

                    //Set the width of each column to match the source table
                    $.each($table.find('th, td'), function (i, th) {
                        $($tableFixed.find('th, td')[i]).width($(th).width());
                    });

                }
                else if (offset <= tableOffset && !$tableFixed.is(":hidden")) {
                    $tableFixed.hide();
                }
            });
        });
    };
})(jQuery);

User · Answer

Best solution is to use this jquery plugin   https   github com jmosbech StickyTableHeaders  This plugin worked great for us and we tried a lot other solutions  We tested it in IE  Chrome and Firefox

User · Answer

This will help you to have a fixed header which can also be scrolled horizontally with data    lt  DOCTYPE html PUBLIC  -  W3C  DTD HTML 4 01 Transitional  EN   http   www w3 org TR html4 loose dtd  gt   lt html gt   lt head gt   lt meta http-equiv  Content-Type  content  text html  charset ISO-8859-1  gt   lt title gt Shubh lt  title gt      lt script type  text javascript  gt      var lastSeen     0  0        function checkScroll div1  div2            if   div1     div2              return          var control   null          if  div1 scrollLeft    lastSeen 0               control   div1          else if  div2 scrollLeft    lastSeen 1               control   div2          if  control    null              return          else             div1 scrollLeft   div2 scrollLeft   control scrollLeft          lastSeen 0    div1 scrollLeft          lastSeen 1    div2 scrollLeft             window              setInterval                       checkScroll document getElementById  innertablediv    document getElementById  headertable                          1    lt  script gt    lt style type  text css  gt   full       width  400px      height  300px      innertablediv       height  200px      overflow  auto      headertable       overflow  hidden     lt  style gt   lt  head gt   lt body gt        lt div id  full  gt               lt div id  headertable  gt               lt table border  1  bgcolor  grey  width  150px  id  headertable  gt                   lt tr gt                       lt td gt shubh  ansh lt  td gt                       lt td gt shubh  ansh lt  td gt                       lt td gt shubh  ansh lt  td gt                       lt td gt shubh  ansh lt  td gt                       lt td gt shubh  ansh lt  td gt                       lt td gt shubh  ansh lt  td gt                       lt td gt shubh  ansh lt  td gt                       lt td gt shubh  ansh lt  td gt                       lt td gt shubh  ansh lt  td gt                       lt td gt shubh  ansh lt  td gt                        lt td gt  amp nbsp  amp nbsp  amp nbsp  lt  td gt                   lt  tr gt                lt  table gt           lt  div gt               lt div id  innertablediv  gt                lt table border  1  id  innertableid  gt                   lt tr gt                       lt td gt shubh  ansh lt  td gt                       lt td gt shubh  ansh lt  td gt                       lt td gt shubh  ansh lt  td gt                       lt td gt shubh  ansh lt  td gt                       lt td gt shubh  ansh lt  td gt                       lt td gt shubh  ansh lt  td gt                       lt td gt shubh  ansh lt  td gt                       lt td gt shubh  ansh lt  td gt                       lt td gt shubh  ansh lt  td gt                       lt td gt shubh  ansh lt  td gt                   lt  tr gt                   lt tr gt                       lt td gt shubh  ansh lt  td gt                       lt td gt shubh  ansh lt  td gt                       lt td gt shubh  ansh lt  td gt                       lt td gt shubh  ansh lt  td gt                       lt td gt shubh  ansh lt  td gt                       lt td gt shubh  ansh lt  td gt                       lt td gt shubh  ansh lt  td gt                       lt td gt shubh  ansh lt  td gt                       lt td gt shubh  ansh lt  td gt                       lt td gt shubh  ansh lt  td gt                   lt  tr gt                   lt tr gt                       lt td gt shubh  ansh lt  td gt                       lt td gt shubh  ansh lt  td gt                       lt td gt shubh  ansh lt  td gt                       lt td gt shubh  ansh lt  td gt                       lt td gt shubh  ansh lt  td gt                       lt td gt shubh  ansh lt  td gt                       lt td gt shubh  ansh lt  td gt                       lt td gt shubh  ansh lt  td gt                       lt td gt shubh  ansh lt  td gt                       lt td gt shubh  ansh lt  td gt                   lt  tr gt                   lt tr gt                       lt td gt shubh  ansh lt  td gt                       lt td gt shubh  ansh lt  td gt                       lt td gt shubh  ansh lt  td gt                       lt td gt shubh  ansh lt  td gt                       lt td gt shubh  ansh lt  td gt                       lt td gt shubh  ansh lt  td gt                       lt td gt shubh  ansh lt  td gt                       lt td gt shubh  ansh lt  td gt                       lt td gt shubh  ansh lt  td gt                       lt td gt shubh  ansh lt  td gt                   lt  tr gt                   lt tr gt                       lt td gt shubh  ansh lt  td gt                       lt td gt shubh  ansh lt  td gt                       lt td gt shubh  ansh lt  td gt                       lt td gt shubh  ansh lt  td gt                       lt td gt shubh  ansh lt  td gt                       lt td gt shubh  ansh lt  td gt                       lt td gt shubh  ansh lt  td gt                       lt td gt shubh  ansh lt  td gt                       lt td gt shubh  ansh lt  td gt                       lt td gt shubh  ansh lt  td gt                   lt  tr gt                   lt tr gt                       lt td gt shubh  ansh lt  td gt                       lt td gt shubh  ansh lt  td gt                       lt td gt shubh  ansh lt  td gt                       lt td gt shubh  ansh lt  td gt                       lt td gt shubh  ansh lt  td gt                       lt td gt shubh  ansh lt  td gt                       lt td gt shubh  ansh lt  td gt                       lt td gt shubh  ansh lt  td gt                       lt td gt shubh  ansh lt  td gt                       lt td gt shubh  ansh lt  td gt                   lt  tr gt                   lt tr gt                       lt td gt shubh  ansh lt  td gt                       lt td gt shubh  ansh lt  td gt                       lt td gt shubh  ansh lt  td gt                       lt td gt shubh  ansh lt  td gt                       lt td gt shubh  ansh lt  td gt                       lt td gt shubh  ansh lt  td gt                       lt td gt shubh  ansh lt  td gt                       lt td gt shubh  ansh lt  td gt                       lt td gt shubh  ansh lt  td gt                       lt td gt shubh  ansh lt  td gt                   lt  tr gt                   lt tr gt                       lt td gt shubh  ansh lt  td gt                       lt td gt shubh  ansh lt  td gt                       lt td gt shubh  ansh lt  td gt                       lt td gt shubh  ansh lt  td gt                       lt td gt shubh  ansh lt  td gt                       lt td gt shubh  ansh lt  td gt                       lt td gt shubh  ansh lt  td gt                       lt td gt shubh  ansh lt  td gt                       lt td gt shubh  ansh lt  td gt                       lt td gt shubh  ansh lt  td gt                   lt  tr gt                   lt tr gt                       lt td gt shubh  ansh lt  td gt                       lt td gt shubh  ansh lt  td gt                       lt td gt shubh  ansh lt  td gt                       lt td gt shubh  ansh lt  td gt                       lt td gt shubh  ansh lt  td gt                       lt td gt shubh  ansh lt  td gt                       lt td gt shubh  ansh lt  td gt                       lt td gt shubh  ansh lt  td gt                       lt td gt shubh  ansh lt  td gt                       lt td gt shubh  ansh lt  td gt                   lt  tr gt                lt  table gt           lt  div gt       lt  div gt   lt  body gt   lt  html gt

User · Answer

Pure CSS  without IE11 support   table th       position  -webkit-sticky     this is for all Safari  Desktop  amp  iOS   not for Chrome     position  sticky      top  0      z-index  10     any positive value  layer order is global     background   fff

User · Answer

There are many really good solution here already. But one of the simplest CSS only solutions that I use in these situations is as follows:

_x000D_

table {_x000D_
  /* Not required only for visualizing */_x000D_
  border-collapse: collapse;_x000D_
  width: 100%;_x000D_
}_x000D_
_x000D_
table thead tr th {_x000D_
  /* Important */_x000D_
  background-color: red;_x000D_
  position: sticky;_x000D_
  z-index: 100;_x000D_
  top: 0;_x000D_
}_x000D_
_x000D_
td {_x000D_
  /* Not required only for visualizing */_x000D_
  padding: 1em;_x000D_
}

_x000D_

<table>_x000D_
  <thead>_x000D_
    <tr>_x000D_
      <th>Col1</th>_x000D_
      <th>Col2</th>_x000D_
      <th>Col3</th>_x000D_
    </tr>_x000D_
  </thead>_x000D_
  <tbody>_x000D_
     <tr>_x000D_
       <td>info</td>_x000D_
       <td>info</td>_x000D_
       <td>info</td>_x000D_
     </tr>_x000D_
     <tr>_x000D_
       <td>info</td>_x000D_
       <td>info</td>_x000D_
       <td>info</td>_x000D_
     </tr>_x000D_
     <tr>_x000D_
       <td>info</td>_x000D_
       <td>info</td>_x000D_
       <td>info</td>_x000D_
     </tr>_x000D_
     <tr>_x000D_
       <td>info</td>_x000D_
       <td>info</td>_x000D_
       <td>info</td>_x000D_
     </tr>_x000D_
     <tr>_x000D_
       <td>info</td>_x000D_
       <td>info</td>_x000D_
       <td>info</td>_x000D_
     </tr>_x000D_
     <tr>_x000D_
       <td>info</td>_x000D_
       <td>info</td>_x000D_
       <td>info</td>_x000D_
     </tr>_x000D_
     <tr>_x000D_
       <td>info</td>_x000D_
       <td>info</td>_x000D_
       <td>info</td>_x000D_
     </tr>_x000D_
     <tr>_x000D_
       <td>info</td>_x000D_
       <td>info</td>_x000D_
       <td>info</td>_x000D_
     </tr>_x000D_
     <tr>_x000D_
       <td>info</td>_x000D_
       <td>info</td>_x000D_
       <td>info</td>_x000D_
     </tr>_x000D_
     <tr>_x000D_
       <td>info</td>_x000D_
       <td>info</td>_x000D_
       <td>info</td>_x000D_
     </tr>_x000D_
     <tr>_x000D_
       <td>info</td>_x000D_
       <td>info</td>_x000D_
       <td>info</td>_x000D_
     </tr>_x000D_
     <tr>_x000D_
       <td>info</td>_x000D_
       <td>info</td>_x000D_
       <td>info</td>_x000D_
     </tr>_x000D_
  </tbody>_x000D_
</table>

_x000D_

Because there is no requirement for JavaScript it simplifies the situation significantly. You essentially need to focus on the second CSS rule, which contains the conditions for ensuring that the head of the table remains of the top no matter the scroll space.

To elaborate on each of the rules in detail. position is meant to indicate to the browser that the head object, its row, and its cells all need to stick to the top. This necessarily needs to be accompanied by top, which specifies to the browser that the head will stick to the top of the page or viewport. Additionally, you can add z-index to ensure that the content of the head always remains on the top.

The background colour is merely to illustrate the point. You do not need to use any additional JavaScript to get this effect. This is supported in most major browsers after 2016.

User · Answer

function fix table header position     var width list           th   each function        width list push   this  width              tr first   css  position    absolute        tr first   css  z-index    1000        th  td   each function index         this  width width list index              tr first   after   lt tr height        tr first   height       gt  lt  tr gt        This is my solution

User · Answer

A bit late to the party  but here is an implementation that works with multiple tables on the same page and  jank  free  using requestAnimationFrame   Also there s no need to provide any width on the columns  Horizontal scrolling works as well   The headers are defined in a div so you are free to add any markup there  like buttons   if required  This is all the HTML that is needed    lt div class  tbl-resp  gt     lt table id  tbl1  class  tbl-resp  tbl  gt        lt thead gt         lt tr gt           lt th gt col 1 lt  th gt           lt th gt col 2 lt  th gt           lt th gt col 3 lt  th gt         lt  tr gt       lt  thead gt      lt  table gt   lt  div gt    https   jsfiddle net lloydleo bk5pt5gs

User · Answer

Create extra table with same header as the main table  Just put thead in the new table with one row and all the headers in it  Do position absolute and background white  For main table put it in a div and use some height and overflow-y scroll  This way our new table will overcome the header of main table and stay there  Surround everything in a div  Below is the rough code to do it          lt div class  col-sm-8  gt            lt table id  header-fixed  class  table table-bordered table-hover  style  width  351px position  absolute background  white   gt           lt thead gt           lt tr gt               lt th gt Col1 lt  th gt               lt th gt Col2 lt  th gt               lt th gt Col3 lt  th gt           lt  tr gt       lt  thead gt         lt  table gt         lt div style  height  300px overflow-y  scroll   gt             lt table id  tableMain  class  table table-bordered table-hover  style  table-layout fixed overflow-wrap  break-word cursor pointer  gt   lt thead gt       lt tr gt         lt th gt Col1 lt  th gt         lt th gt Col2 lt  th gt         lt th gt Col3 lt  th gt       lt  tr gt     lt  thead gt     lt tbody gt        lt tr gt          lt td gt info lt  td gt          lt td gt info lt  td gt          lt td gt info lt  td gt        lt  tr gt        lt tr gt          lt td gt info lt  td gt          lt td gt info lt  td gt          lt td gt info lt  td gt        lt  tr gt        lt tr gt          lt td gt info lt  td gt          lt td gt info lt  td gt          lt td gt info lt  td gt        lt  tr gt     lt  tbody gt                                        lt  table gt                 lt  div gt           lt  div gt

User · Answer

I found a solution without jquery  HTML   lt table class  fixed header  gt     lt thead gt       lt tr gt         lt th gt Col 1 lt  th gt         lt th gt Col 2 lt  th gt         lt th gt Col 3 lt  th gt         lt th gt Col 4 lt  th gt         lt th gt Col 5 lt  th gt       lt  tr gt     lt  thead gt     lt tbody gt       lt tr gt         lt td gt row 1-0 lt  td gt         lt td gt row 1-1 lt  td gt         lt td gt row 1-2 lt  td gt         lt td gt row 1-3 lt  td gt         lt td gt row 1-4 lt  td gt       lt  tr gt       lt tr gt         lt td gt row 2-0 lt  td gt         lt td gt row 2-1 lt  td gt         lt td gt row 2-2 lt  td gt         lt td gt row 2-3 lt  td gt         lt td gt row 2-4 lt  td gt       lt  tr gt       lt tr gt         lt td gt row 3-0 lt  td gt         lt td gt row 3-1 lt  td gt         lt td gt row 3-2 lt  td gt         lt td gt row 3-3 lt  td gt         lt td gt row 3-4 lt  td gt       lt  tr gt       lt tr gt         lt td gt row 4-0 lt  td gt         lt td gt row 4-1 lt  td gt         lt td gt row 4-2 lt  td gt         lt td gt row 4-3 lt  td gt         lt td gt row 4-4 lt  td gt       lt  tr gt       lt tr gt         lt td gt row 5-0 lt  td gt         lt td gt row 5-1 lt  td gt         lt td gt row 5-2 lt  td gt         lt td gt row 5-3 lt  td gt         lt td gt row 5-4 lt  td gt       lt  tr gt       lt tr gt         lt td gt row 6-0 lt  td gt         lt td gt row 6-1 lt  td gt         lt td gt row 6-2 lt  td gt         lt td gt row 6-3 lt  td gt         lt td gt row 6-4 lt  td gt       lt  tr gt       lt tr gt         lt td gt row 7-0 lt  td gt         lt td gt row 7-1 lt  td gt         lt td gt row 7-2 lt  td gt         lt td gt row 7-3 lt  td gt         lt td gt row 7-4 lt  td gt       lt  tr gt     lt  tbody gt   lt  table gt    CSS   fixed header      width  400px      table-layout  fixed      border-collapse  collapse      fixed header tbody    display block    width  100     overflow  auto    height  100px      fixed header thead tr      display  block      fixed header thead     background  black    color  fff      fixed header th   fixed header td     padding  5px    text-align  left    width  200px      You can see it working here   https   jsfiddle net lexsoul fqbsty3h  Source  https   medium com  vembarrajan html-css-tricks-scroll-able-table-body-tbody-d23182ae0fbc

User · Answer

I was able to fix the problem with changing column widths. I started with Andrew's solution above (thanks so much!) and then added one little loop to set the widths of the cloned td's:

$("#header-fixed td").each(function(index){
    var index2 = index;
    $(this).width(function(index2){
        return $("#table-1 td").eq(index).width();
    });
});

This solves the problem without having to clone the entire table and hide the body. I'm brand new to JavaScript and jQuery (and to stack overflow), so any comments are appreciated.

User · Answer

I found a simple solution without using JQuery and using CSS only.

You have to put the fixed contents inside 'th' tags and add the CSS

table th {
    position:sticky;
    top:0;
    z-index:1;
    border-top:0;
    background: #ededed;
}

The position, z-index and top properties are enough. But you can apply the rest to give for a better view.

User · Answer

Well  I was trying to obtain the same effect without resorting to fixed size columns or having a fixed height for the entire table   The solution I came up with is a hack  It consists of duplicating the entire table then hiding everything but the header  and making that have a fixed position   HTML   lt div id  table-container  gt   lt table id  maintable  gt       lt thead gt           lt tr gt               lt th gt Col1 lt  th gt               lt th gt Col2 lt  th gt               lt th gt Col3 lt  th gt           lt  tr gt       lt  thead gt       lt tbody gt           lt tr gt               lt td gt info lt  td gt               lt td gt info lt  td gt               lt td gt info lt  td gt           lt  tr gt           lt tr gt               lt td gt info lt  td gt               lt td gt info lt  td gt               lt td gt info lt  td gt           lt  tr gt           lt tr gt               lt td gt info lt  td gt               lt td gt some really long line here instead lt  td gt               lt td gt info lt  td gt           lt  tr gt           lt tr gt               lt td gt info lt  td gt               lt td gt info lt  td gt               lt td gt info lt  td gt           lt  tr gt                   lt tr gt               lt td gt info lt  td gt               lt td gt info lt  td gt               lt td gt info lt  td gt           lt  tr gt                   lt tr gt               lt td gt info lt  td gt               lt td gt info lt  td gt               lt td gt info lt  td gt           lt  tr gt           lt tr gt               lt td gt info lt  td gt               lt td gt info lt  td gt               lt td gt info lt  td gt           lt  tr gt       lt  tbody gt   lt  table gt   lt div id  bottom anchor  gt  lt  div gt   lt  div gt    CSS  body   height  1000px    thead      background-color white      javascript  function moveScroll        var scroll     window  scrollTop        var anchor top       maintable   offset   top      var anchor bottom       bottom anchor   offset   top      if  scroll gt anchor top  amp  amp  scroll lt anchor bottom        clone table       clone        if clone table length    0           clone table       maintable   clone            clone table attr  id    clone            clone table css  position  fixed                     pointer-events    none                    top 0            clone table width     maintable   width                 table-container   append clone table               clone   css  visibility  hidden                 clone thead   css   visibility   visible   pointer-events   auto                 else           clone   remove              window  scroll moveScroll      See here  http   jsfiddle net QHQGF 7   Edit  updated the code so that the thead can receive pointer events so buttons and links in the header still work   This fixes the problem reported by luhfluh and Joe M   New jsfiddle here  http   jsfiddle net cjKEx

User · Answer

I ve tried most of these solutions  and eventually found  IMO  the best  modern  solution   CSS grids    With CSS grids  you can define a  grid   and you can finally create a nice  javascript-free  cross-browser solution for a table with a fixed header  and scrollable content  The header height can even dynamic   CSS  Display as grid  and set the number of template-rows    grid       display  grid      grid-template-rows  50px auto     For fixed height header     grid-template-rows  auto auto     For dynamic height header     HTML  Create a grid container and the number of defined rows    lt div class  grid  gt       lt div gt  lt  div gt       lt div gt  lt  div gt   lt  div gt      Here is working example   CSS  body     margin  0px    padding  0px    text-align  center      table     width  100     height  100     display  grid    grid-template-rows  50px auto     table-heading     background-color   ddd     table-content     overflow-x  hidden    overflow-y  scroll      HTML   lt html gt       lt head gt       lt  head gt       lt body gt           lt div class  table  gt               lt div class  table-heading  gt                  HEADING              lt  div gt               lt div class  table-content  gt                  CONTENT - CONTENT - CONTENT  lt br  gt                  CONTENT - CONTENT - CONTENT  lt br  gt                  CONTENT - CONTENT - CONTENT  lt br  gt                  CONTENT - CONTENT - CONTENT  lt br  gt                  CONTENT - CONTENT - CONTENT  lt br  gt                  CONTENT - CONTENT - CONTENT  lt br  gt               lt  div gt           lt  div gt       lt  body gt   lt  html gt

[jquery] Table header to stay fixed at the top when user scrolls it out of view with jQuery

The answer is

HTML

CSS

javascript

CSS grids

Examples related to jquery

Examples related to html

Examples related to html-table

Tags