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    lt table 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    So in the above example  I want the  lt thead gt  to scroll with the page if it goes out of view   IMPORTANT  I am NOT looking for a solution where the  lt tbody gt  will have a scrollbar  overflow auto

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

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

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

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  lt thead gt  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       lt table   gt                     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  gt  tableOffset  amp  amp   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  lt   tableOffset  amp  amp    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

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

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

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

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   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   lt table gt  x000D     lt thead gt  x000D       lt tr gt  x000D         lt th gt Col1 lt  th gt  x000D         lt th gt Col2 lt  th gt  x000D         lt th gt Col3 lt  th gt  x000D       lt  tr gt  x000D     lt  thead gt  x000D     lt tbody gt  x000D        lt tr gt  x000D          lt td gt info lt  td gt  x000D          lt td gt info lt  td gt  x000D          lt td gt info lt  td gt  x000D        lt  tr gt  x000D        lt tr gt  x000D          lt td gt info lt  td gt  x000D          lt td gt info lt  td gt  x000D          lt td gt info lt  td gt  x000D        lt  tr gt  x000D        lt tr gt  x000D          lt td gt info lt  td gt  x000D          lt td gt info lt  td gt  x000D          lt td gt info lt  td gt  x000D        lt  tr gt  x000D        lt tr gt  x000D          lt td gt info lt  td gt  x000D          lt td gt info lt  td gt  x000D          lt td gt info lt  td gt  x000D        lt  tr gt  x000D        lt tr gt  x000D          lt td gt info lt  td gt  x000D          lt td gt info lt  td gt  x000D          lt td gt info lt  td gt  x000D        lt  tr gt  x000D        lt tr gt  x000D          lt td gt info lt  td gt  x000D          lt td gt info lt  td gt  x000D          lt td gt info lt  td gt  x000D        lt  tr gt  x000D        lt tr gt  x000D          lt td gt info lt  td gt  x000D          lt td gt info lt  td gt  x000D          lt td gt info lt  td gt  x000D        lt  tr gt  x000D        lt tr gt  x000D          lt td gt info lt  td gt  x000D          lt td gt info lt  td gt  x000D          lt td gt info lt  td gt  x000D        lt  tr gt  x000D        lt tr gt  x000D          lt td gt info lt  td gt  x000D          lt td gt info lt  td gt  x000D          lt td gt info lt  td gt  x000D        lt  tr gt  x000D        lt tr gt  x000D          lt td gt info lt  td gt  x000D          lt td gt info lt  td gt  x000D          lt td gt info lt  td gt  x000D        lt  tr gt  x000D        lt tr gt  x000D          lt td gt info lt  td gt  x000D          lt td gt info lt  td gt  x000D          lt td gt info lt  td gt  x000D        lt  tr gt  x000D        lt tr gt  x000D          lt td gt info lt  td gt  x000D          lt td gt info lt  td gt  x000D          lt td gt info lt  td gt  x000D        lt  tr gt  x000D     lt  tbody gt  x000D   lt  table gt  x000D   x000D   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

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

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

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  lt div class  tableWrapper  gt  lt  div gt      fixTables          document querySelectorAll   tableWrapper   forEach  tableWrapper    gt          tableWrapper addEventListener  scroll        gt            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  lt  len  i            tableWrappers i  addEventListener  scroll        gt            const translate    translate 0     tableWrappers i  scrollTop    px           const headers   tableWrappers i  querySelectorAll  thead th           for  let i   0  len   headers length  i  lt  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

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

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

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

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

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

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   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  lt  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   lt table id  fixH  gt  lt  table gt     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 gt tr gt th    function ind val   x000D                ClnH find  tr gt th   ind   css   val  getStyleObject     x000D              x000D      return ClnH   x000D       x000D        fn moveScroll function    x000D          var offset     window  scrollTop    x000D          if  offset  gt  tableTop  amp  amp  offset lt tableBottom   x000D              if ClnH is   hidden   ClnH show    x000D                  fixH   css  margin-left   -    window  scrollLeft    px    x000D            x000D          else if  offset  lt  tableTop    offset gt 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   lt script src  https   ajax googleapis com ajax libs jquery 1 11 1 jquery min js  gt  lt  script gt  x000D   x000D   x000D   lt h3 gt example lt  h3 gt   x000D   lt table id  repTb  gt  x000D   lt thead gt  x000D   lt tr gt  lt th gt Col1 lt  th gt  lt th gt Column2 lt  th gt  lt th gt Description lt  th gt  lt  tr gt  x000D   lt  thead gt  x000D   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  x000D   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  x000D   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  x000D   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  x000D   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  x000D   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  x000D   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  x000D   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  x000D   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  x000D   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  x000D   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  x000D   lt  table gt  x000D   x000D   x000D

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

Examples related to jquery

Examples related to html

Examples related to html-table