HTML table with fixed headers

Question

Is there a cross-browser CSS JavaScript technique to display a long HTML table such that the column headers stay fixed on-screen and do not scroll with the table body  Think of the  freeze panes  effect in Microsoft Excel   I want to be able to scroll through the contents of the table  but to always be able to see the column headers at the top

User · Answer

Two divs  one for header  one for data   Make the data div scrollable  and use JavaScript to set the width of the columns in the header to be the same as the widths in the data   I think the data columns widths need to be fixed rather than dynamic

User · Answer

Here is a jQuery plugin for fixed table headers  It allows the entire page to scroll  freezing the header when it reaches the top  It works well with Twitter Bootstrap tables   GitHub repository  https   github com oma table-fixed-header  It does not scroll only table content  Look to other tools for that  as one of these other answers  You decide what fits your case the best

User · Answer

All of the attempts to solve this from outside the CSS specification are pale shadows of what we really want  Delivery on the implied promise of THEAD   This frozen-headers-for-a-table issue has been an open wound in HTML CSS for a long time   In a perfect world  there would be a pure-CSS solution for this problem  Unfortunately  there doesn t seem to be a good one in place   Relevant standards-discussions on this topic include    The Sticky Positioning proposal at www-style  http   lists w3 org Archives Public www-style 2012Jun 0627 html Tab Atkins  proposal for position-root  position-contain or position-restrict   http   www xanthir com blog b48H0   UPDATE  Firefox shipped position sticky in version 32  Everyone wins

User · Answer

I found this workaround - move header row in a table above table with data    x000D   x000D   lt html gt  x000D   lt head gt  x000D    lt title gt Fixed header lt  title gt  x000D    lt style gt  x000D    table td  width 75px   x000D    lt  style gt  x000D   lt  head gt  x000D   x000D   lt body gt  x000D   lt div style  height auto  width 350px  overflow auto  gt  x000D   lt table border  1  gt  x000D   lt tr gt  x000D    lt td gt header 1 lt  td gt  x000D    lt td gt header 2 lt  td gt  x000D    lt td gt header 3 lt  td gt  x000D   lt  tr gt  x000D   lt  table gt  x000D   lt  div gt  x000D   x000D   lt div style  height 50px  width 350px  overflow auto  gt  x000D   lt table border  1  gt  x000D   lt tr gt  x000D    lt td gt row 1 col 1 lt  td gt  x000D    lt td gt row 1 col 2 lt  td gt  x000D    lt td gt row 1 col 3 lt  td gt    x000D   lt  tr gt  x000D   lt tr gt  x000D    lt td gt row 2 col 1 lt  td gt  x000D    lt td gt row 2 col 2 lt  td gt  x000D    lt td gt row 2 col 3 lt  td gt    x000D   lt  tr gt  x000D   lt tr gt  x000D    lt td gt row 3 col 1 lt  td gt  x000D    lt td gt row 3 col 2 lt  td gt  x000D    lt td gt row 3 col 3 lt  td gt    x000D   lt  tr gt  x000D   lt tr gt  x000D    lt td gt row 4 col 1 lt  td gt  x000D    lt td gt row 4 col 2 lt  td gt  x000D    lt td gt row 4 col 3 lt  td gt    x000D   lt  tr gt  x000D   lt tr gt  x000D    lt td gt row 5 col 1 lt  td gt  x000D    lt td gt row 5 col 2 lt  td gt  x000D    lt td gt row 5 col 3 lt  td gt    x000D   lt  tr gt  x000D   lt tr gt  x000D    lt td gt row 6 col 1 lt  td gt  x000D    lt td gt row 6 col 2 lt  td gt  x000D    lt td gt row 6 col 3 lt  td gt    x000D   lt  tr gt  x000D   lt  table gt  x000D   lt  div gt  x000D   x000D   x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

I realize the question allows JavaScript  but here is a pure CSS solution I worked up that also allows for the table to expand horizontally  It was tested with Internet nbsp Explorer nbsp 10 and the latest Chrome and Firefox browsers  A link to jsFiddle is at the bottom   The HTML   Putting some text here to differentiate between the header aligning with the top of the screen and the header aligning with the top of one of its ancestor containers    lt div id  positioning-container  gt   lt div id  scroll-container  gt       lt table gt           lt colgroup gt               lt col class  col1  gt  lt  col gt               lt col class  col2  gt  lt  col gt           lt  colgroup gt           lt thead gt               lt th class  header-col1  gt  lt div gt Header 1 lt  div gt  lt  th gt               lt th class  header-col2  gt  lt div gt Header 2 lt  div gt  lt  th gt           lt  thead gt           lt tbody gt               lt tr gt  lt td gt Cell 1 1 lt  td gt  lt td gt Cell 1 2 lt  td gt  lt  tr gt               lt tr gt  lt td gt Cell 2 1 lt  td gt  lt td gt Cell 2 2 lt  td gt  lt  tr gt               lt tr gt  lt td gt Cell 3 1 lt  td gt  lt td gt Cell 3 2 lt  td gt  lt  tr gt               lt tr gt  lt td gt Cell 4 1 lt  td gt  lt td gt Cell 4 2 lt  td gt  lt  tr gt               lt tr gt  lt td gt Cell 5 1 lt  td gt  lt td gt Cell 5 2 lt  td gt  lt  tr gt               lt tr gt  lt td gt Cell 6 1 lt  td gt  lt td gt Cell 6 2 lt  td gt  lt  tr gt               lt tr gt  lt td gt Cell 7 1 lt  td gt  lt td gt Cell 7 2 lt  td gt  lt  tr gt            lt  tbody gt       lt  table gt   lt  div gt   lt  div gt    And the CSS   table      border-collapse  collapse      table-layout  fixed      width  100        Not required  just helps with alignment for this example    td  th      padding  0      margin  0     tbody      background-color   ddf     thead          Keeps the header in place  Don t forget top  0        position  absolute      top  0      background-color   ddd          The 17px is to adjust for the scrollbar width         This is a new css value that makes this pure        css example possible        width  calc 100  - 17px       height  20px        Positioning container  Required to position the    header since the header uses position absolute     otherwise it would position at the top of the screen      positioning-container      position  relative        A container to set the scroll-bar and    includes padding to move the table contents    down below the header  padding   header height      scroll-container      overflow-y  auto      padding-top  20px      height  100px     header-col1      background-color  red        Fixed-width header columns need a div to set their width     header-col1 div      width  100px        Expandable columns need a width set on the th tag     header-col2      width  100      col1       width  100px     col2      width  100       http   jsfiddle net HNHRv 3

User · Answer

A simple jQuery plugin  This is a variation on Mahes  solution  You can call it like    table foo   scrollableTable     The idea is    Split the thead and tbody into separate table elements Make their cell widths match again Wrap the second table in a div scrollable Use CSS to make div scrollable actually scroll   The CSS could be   div scrollable   height  300px  overflow-y  scroll     Caveats   Obviously  splitting up these tables makes the markup less semantic  I m not sure what effect this has on accessibility  This plugin does not deal with footers  multiple headers  etc  I ve only tested it in Chrome version 20    That said  it works for my purposes and you re free to take and modify it   Here s the plugin   jQuery fn scrollableTable   function        var  newTable   oldTable   scrollableDiv  originalWidths     oldTable     this         Once the tables are split  their cell widths may change        Grab these so we can make the two tables match again    originalWidths    oldTable find  tr first td   map function         return   this  width              newTable    oldTable clone       oldTable find  tbody   remove       newTable find  thead   remove         each   oldTable   newTable   function index   table         table find  tr first td   each function i            this  width originalWidths i                      scrollableDiv       lt div  gt    addClass  scrollable       newTable insertAfter  oldTable  wrap  scrollableDiv

User · Answer

Not-so-clean  but pure HTML CSS solution   table       overflow-x scroll     tbody       max-height    your desired max height       overflow-y scroll      display block      Updated for IE8  JSFiddle example

User · Answer

For those who tried the nice solution given by Maximilian Hils  and did not succeed to get it to work with Internet Explorer  I had the same problem  Internet nbsp Explorer nbsp 11  and found out what was the problem   In Internet nbsp Explorer nbsp 11 the style transform  at least with translate  does not work on  lt THEAD gt   I solved this by instead applying the style to all the  lt TH gt  in a loop  That worked  My JavaScript code looks like this   document getElementById  pnlGridWrap   addEventListener  scroll   function        var translate    translate 0     this scrollTop    px      var myElements   this querySelectorAll  th      for  var i   0  i  lt  myElements length  i          myElements i  style transform translate            In my case the table was a GridView in ASP NET  First I thought it was because it had no  lt THEAD gt   but even when I forced it to have one  it did not work  Then I found out what I wrote above   It is a very nice and simple solution  On Chrome it is perfect  on Firefox a bit jerky  and on Internet nbsp Explorer even more jerky  But all in all a good solution

User · Answer

A lot of people seem to be looking for this answer  I found it buried in an answer to another question here  Syncing column width of between tables in two different frames  etc  Of the dozens of methods I have tried this is the only method I found that works reliably to allow you to have a scrolling bottom table with the header table having the same widths   Here is how I did it  first I improved upon the jsfiddle above to create this function  which works on both td and th  in case that trips up others who use th for styling of their header rows    var setHeaderTableWidth  function  headertableid basetableid                      headertableid  width       basetableid  width                       headertableid   tr th   each function  i                      this  width         basetableid   tr first td   i   width                                         headertableid     tr td   each function  i                      this  width           basetableid     tr first td   i   width                                 Next  you need to create two tables  NOTE the header table should have an extra TD to leave room in the top table for the scrollbar  like this     lt table id  headertable1  class  input-cells table-striped  gt           lt thead gt               lt tr style  background-color darkgray color white   gt  lt th gt header1 lt  th gt  lt th gt header2 lt  th gt  lt th gt header3 lt  th gt  lt th gt header4 lt  th gt  lt th gt header5 lt  th gt  lt th gt header6 lt  th gt  lt th gt  lt  th gt  lt  tr gt           lt  thead gt        lt  table gt       lt div id  resizeToBottom  style  overflow-y scroll overflow-x hidden   gt           lt table id  basetable1  class  input-cells table-striped  gt               lt tbody  gt                   lt tr gt                       lt td gt testdata lt  td gt                       lt td gt 2 lt  td gt                       lt td gt 3 lt  td gt                       lt td gt 4 lt  span gt  lt  td gt                       lt td gt 55555555555555 lt  td gt                       lt td gt test lt  td gt  lt  tr gt               lt  tbody gt           lt  table gt       lt  div gt    Then do something like           setHeaderTableWidth  headertable1    basetable1              window  resize function                  setHeaderTableWidth  headertable1    basetable1                  This is the only solution that I found on Stack nbsp Overflow that works out of many similar questions that have been posted  that works in all my cases   For example  I tried the jQuery stickytables plugin which does not work with durandal  and the Google Code project here https   code google com p js-scroll-table-header issues detail id 2  Other solutions involving cloning the tables  have poor performance  or suck and don t work in all cases   There is no need for these overly complex solutions  Just make two tables like the examples below and call setHeaderTableWidth function like described here and boom  you are done   If this does not work for you  you probably were playing with your CSS box-sizing property and you need to set it correctly  It is easy to screw up your CSS content by accident  There are many things that can go wrong  so just be aware careful of that  This approach works for me

User · Answer

A more refined pure CSS scrolling table All of the pure CSS solutions I ve seen so far-- clever though they may be-- lack a certain level of polish  or just don t work right in some situations  So  I decided to create my own    Features   It s pure CSS  so no jQuery required  or any JavaScript code at all  for that matter  You can set the table width to a percent  a k a   quot fluid quot   or a fixed value  or let the content determine its width  a k a   quot auto quot   Column widths can also be fluid  fixed  or auto  Columns will never become misaligned with headers due to horizontal scrolling  a problem that occurs in every other CSS-based solution I ve seen that doesn t require fixed widths   Compatible with all of the popular desktop browsers  including Internet Explorer back to version 8 Clean  polished appearance  no sloppy-looking 1-pixel gaps or misaligned borders  looks the same in all browsers  Here are a couple of fiddles that show the fluid and auto width options   Fluid Width and Height  adapts to screen size   jsFiddle  Note that the scrollbar only shows up when needed in this configuration  so you may have to shrink the frame to see it   Auto Width  Fixed Height  easier to integrate with other content   jsFiddle   The Auto Width  Fixed Height configuration probably has more use cases  so I ll post the code below   x000D   x000D     The following  html  and  body  rule sets are required only    if using a   width or height      html     width  100     height  100        body     box-sizing  border-box    width  100     height  100     margin  0    padding  0 20px 0 20px    text-align  center     scrollingtable     box-sizing  border-box    display  inline-block    vertical-align  middle    overflow  hidden    width  auto     If you want a fixed width  set it here  else set to auto      min-width  0  100        If you want a   width  set it here  else set to 0      height  188px  100        Set table height here  can be fixed value or        min-height  0  104px       If using   height  make this large enough to fit scrollbar arrows   caption   thead      font-family  Verdana  Tahoma  sans-serif    font-size  16px    line-height  20px    padding  20px 0 20px 0     Need enough padding to make room for caption      text-align  left    color  black     scrollingtable    box-sizing  border-box    scrollingtable  gt  div     position  relative    border-top  1px solid black    height  100     padding-top  20px     This determines column header height       scrollingtable  gt  div before     top  0    background  cornflowerblue     Header row background color       scrollingtable  gt  div before   scrollingtable  gt  div  gt  div after     content        position  absolute    z-index  -1    width  100     height  100     left  0     scrollingtable  gt  div  gt  div     min-height  0  43px       If using   height  make this large                             enough to fit scrollbar arrows      max-height  100     overflow  scroll  auto       Set to auto if using fixed                                or   width  else scroll      overflow-x  hidden    border  1px solid black     Border around table body       scrollingtable  gt  div  gt  div after  background  white      Match page background color     scrollingtable  gt  div  gt  div  gt  table     width  100     border-spacing  0    margin-top  -20px     Inverse of column header height        margin-right  17px       Uncomment if using   width       scrollingtable  gt  div  gt  div  gt  table  gt  caption     position  absolute    top  -20px    inverse of caption height     margin-top  -1px    inverse of border-width     width  100     font-weight  bold    text-align  center     scrollingtable  gt  div  gt  div  gt  table  gt     gt  tr  gt     padding  0    scrollingtable  gt  div  gt  div  gt  table  gt  thead     vertical-align  bottom    white-space  nowrap    text-align  center     scrollingtable  gt  div  gt  div  gt  table  gt  thead  gt  tr  gt     gt  div     display  inline-block    padding  0 6px 0 6px    header cell padding      scrollingtable  gt  div  gt  div  gt  table  gt  thead  gt  tr  gt   first-child before     content        position  absolute    top  0    left  0    height  20px    match column header height     border-left  1px solid black    leftmost header border      scrollingtable  gt  div  gt  div  gt  table  gt  thead  gt  tr  gt     gt  div label  before   scrollingtable  gt  div  gt  div  gt  table  gt  thead  gt  tr  gt     gt  div  gt  div first-child   scrollingtable  gt  div  gt  div  gt  table  gt  thead  gt  tr  gt       before     position  absolute    top  0    white-space  pre-wrap    color  white    header row font color      scrollingtable  gt  div  gt  div  gt  table  gt  thead  gt  tr  gt     gt  div label  before   scrollingtable  gt  div  gt  div  gt  table  gt  thead  gt  tr  gt     gt  div label  after  content  attr label     scrollingtable  gt  div  gt  div  gt  table  gt  thead  gt  tr  gt       before     content        display  block    min-height  20px     Match column header height      padding-top  1px    border-left  1px solid black     Borders between header cells       scrollingtable  scrollbarhead  float  right    scrollingtable  scrollbarhead before     position  absolute    width  100px    top  -1px     Inverse border-width      background  white     Match page background color       scrollingtable  gt  div  gt  div  gt  table  gt  tbody  gt  tr after     content        display  table-cell    position  relative    padding  0    border-top  1px solid black    top  -1px     Inverse of border width       scrollingtable  gt  div  gt  div  gt  table  gt  tbody  vertical-align  top    scrollingtable  gt  div  gt  div  gt  table  gt  tbody  gt  tr  background  white    scrollingtable  gt  div  gt  div  gt  table  gt  tbody  gt  tr  gt        border-bottom  1px solid black    padding  0 6px 0 6px    height  20px     Match column header height       scrollingtable  gt  div  gt  div  gt  table  gt  tbody last-of-type  gt  tr last-child  gt     border-bottom  none    scrollingtable  gt  div  gt  div  gt  table  gt  tbody  gt  tr nth-child even   background  gainsboro      Alternate row color     scrollingtable  gt  div  gt  div  gt  table  gt  tbody  gt  tr  gt         border-left  1px solid black      Borders between body cells    x000D   lt div class  scrollingtable  gt     lt div gt       lt div gt         lt table gt           lt caption gt Top Caption lt  caption gt           lt thead gt             lt tr gt               lt th gt  lt div label  Column 1   gt  lt  th gt               lt th gt  lt div label  Column 2   gt  lt  th gt               lt th gt  lt div label  Column 3   gt  lt  th gt               lt th gt                 lt  -- More versatile way of doing column label  requires two identical copies of label -- gt                 lt div gt  lt div gt Column 4 lt  div gt  lt div gt Column 4 lt  div gt  lt  div gt               lt  th gt               lt th class  scrollbarhead   gt   lt  -- ALWAYS ADD THIS EXTRA CELL AT END OF HEADER ROW -- gt             lt  tr gt           lt  thead gt           lt tbody gt             lt tr gt  lt td gt Lorem ipsum lt  td gt  lt td gt Dolor lt  td gt  lt td gt Sit lt  td gt  lt td gt Amet consectetur lt  td gt  lt  tr gt             lt tr gt  lt td gt Lorem ipsum lt  td gt  lt td gt Dolor lt  td gt  lt td gt Sit lt  td gt  lt td gt Amet consectetur lt  td gt  lt  tr gt             lt tr gt  lt td gt Lorem ipsum lt  td gt  lt td gt Dolor lt  td gt  lt td gt Sit lt  td gt  lt td gt Amet consectetur lt  td gt  lt  tr gt             lt tr gt  lt td gt Lorem ipsum lt  td gt  lt td gt Dolor lt  td gt  lt td gt Sit lt  td gt  lt td gt Amet consectetur lt  td gt  lt  tr gt             lt tr gt  lt td gt Lorem ipsum lt  td gt  lt td gt Dolor lt  td gt  lt td gt Sit lt  td gt  lt td gt Amet consectetur lt  td gt  lt  tr gt             lt tr gt  lt td gt Lorem ipsum lt  td gt  lt td gt Dolor lt  td gt  lt td gt Sit lt  td gt  lt td gt Amet consectetur lt  td gt  lt  tr gt             lt tr gt  lt td gt Lorem ipsum lt  td gt  lt td gt Dolor lt  td gt  lt td gt Sit lt  td gt  lt td gt Amet consectetur lt  td gt  lt  tr gt             lt tr gt  lt td gt Lorem ipsum lt  td gt  lt td gt Dolor lt  td gt  lt td gt Sit lt  td gt  lt td gt Amet consectetur lt  td gt  lt  tr gt             lt tr gt  lt td gt Lorem ipsum lt  td gt  lt td gt Dolor lt  td gt  lt td gt Sit lt  td gt  lt td gt Amet consectetur lt  td gt  lt  tr gt             lt tr gt  lt td gt Lorem ipsum lt  td gt  lt td gt Dolor lt  td gt  lt td gt Sit lt  td gt  lt td gt Amet consectetur lt  td gt  lt  tr gt             lt tr gt  lt td gt Lorem ipsum lt  td gt  lt td gt Dolor lt  td gt  lt td gt Sit lt  td gt  lt td gt Amet consectetur lt  td gt  lt  tr gt             lt tr gt  lt td gt Lorem ipsum lt  td gt  lt td gt Dolor lt  td gt  lt td gt Sit lt  td gt  lt td gt Amet consectetur lt  td gt  lt  tr gt           lt  tbody gt         lt  table gt       lt  div gt      Faux bottom caption    lt  div gt   lt  div gt    lt  -- if lte IE 9  gt  lt style gt  scrollingtable  gt  div  gt  div  gt  table  margin-right  17px   lt  style gt  lt   endif -- gt  x000D   x000D   x000D   The method I used to freeze the header row is similar to d-Pixie s  so refer to his post for an explanation  There were a slew of bugs and limitations with that technique that could only be fixed with heaps of additional CSS and an extra div container or two

User · Answer

Here s a solution that we ended up working with  in order to deal with some edge cases and older versions of Internet nbsp Explorer  we eventually also faded out the title bar on scroll then faded it back in when scrolling ends  but in Firefox and WebKit browsers this solution just works  It assumes border-collapse  collapse   The key to this solution is that once you apply border-collapse  CSS transforms work on the header  so it s just a matter of intercepting scroll events and setting the transform correctly  You don t need to duplicate anything  Short of this behavior being implemented properly in the browser  it s hard to imagine a more light-weight solution   JSFiddle  http   jsfiddle net podperson tH9VU 2   It s implemented as a simple jQuery plugin  You simply make your thead s sticky with a call like    thead   sticky    and they ll hang around  It works for multiple tables on a page and head sections halfway down big tables     fn sticky   function          this  each  function            var thead     this               tbody   thead next  tbody             updateHeaderPosition             function updateHeaderPosition                if                  thead offset   top  lt    document  scrollTop                    amp  amp  tbody offset   top   tbody height    gt    document  scrollTop                                  var tr   tbody find  tr   last                        y   tr offset   top - thead height    lt    document  scrollTop                             tr offset   top - thead height   - thead offset   top                             document  scrollTop   - thead offset   top                   thead find  th   css                        z-index   100                       transform    translateY     y    px                         -webkit-transform    translateY     y    px                                     else                   thead find  th   css                        transform    none                        -webkit-transform    none                                                          See http   www quirksmode org dom events scroll html           window  on  scroll   updateHeaderPosition                 thead   sticky

User · Answer

Somehow I ended up with Position Sticky working fine on my case    x000D   x000D  table  x000D    width  100   x000D    border  collapse  x000D    x000D   x000D  th  x000D      position  sticky  x000D      top  0px  x000D      border  1px solid black  x000D      background   ff5722  x000D      color   f5f5f5  x000D      font-weight  600  x000D    x000D  td  x000D      background   d3d3d3  x000D      border  1px solid black  x000D      color   f5f5f5  x000D      font-weight  600  x000D    x000D   x000D  div  x000D    height  150px x000D    overflow  auto  x000D    width  100  x000D    x000D   lt div gt  x000D       lt table gt  x000D           lt thead gt  x000D               lt tr gt  x000D                   lt th gt header 1 lt  th gt  x000D                   lt th gt header 2 lt  th gt  x000D                   lt th gt header 3 lt  th gt  x000D                   lt th gt header 4 lt  th gt  x000D                   lt th gt header 5 lt  th gt  x000D                   lt th gt header 6 lt  th gt  x000D                   lt th gt header 7 lt  th gt  x000D               lt  tr gt  x000D           lt  thead gt  x000D           lt tbody gt  x000D               lt tr gt  x000D                   lt td gt data 1 lt  td gt  x000D                   lt td gt data 2 lt  td gt  x000D                   lt td gt data 3 lt  td gt  x000D                   lt td gt data 4 lt  td gt  x000D                   lt td gt data 5 lt  td gt  x000D                   lt td gt data 6 lt  td gt  x000D                   lt td gt data 7 lt  td gt  x000D               lt  tr gt  x000D               lt tr gt  x000D                   lt td gt data 1 lt  td gt  x000D                   lt td gt data 2 lt  td gt  x000D                   lt td gt data 3 lt  td gt  x000D                   lt td gt data 4 lt  td gt  x000D                   lt td gt data 5 lt  td gt  x000D                   lt td gt data 6 lt  td gt  x000D                   lt td gt data 7 lt  td gt  x000D               lt  tr gt  x000D               lt tr gt  x000D                   lt td gt data 1 lt  td gt  x000D                   lt td gt data 2 lt  td gt  x000D                   lt td gt data 3 lt  td gt  x000D                   lt td gt data 4 lt  td gt  x000D                   lt td gt data 5 lt  td gt  x000D                   lt td gt data 6 lt  td gt  x000D                   lt td gt data 7 lt  td gt  x000D               lt  tr gt  x000D               lt tr gt  x000D                   lt td gt data 1 lt  td gt  x000D                   lt td gt data 2 lt  td gt  x000D                   lt td gt data 3 lt  td gt  x000D                   lt td gt data 4 lt  td gt  x000D                   lt td gt data 5 lt  td gt  x000D                   lt td gt data 6 lt  td gt  x000D                   lt td gt data 7 lt  td gt  x000D               lt  tr gt  x000D               lt tr gt  x000D                   lt td gt data 1 lt  td gt  x000D                   lt td gt data 2 lt  td gt  x000D                   lt td gt data 3 lt  td gt  x000D                   lt td gt data 4 lt  td gt  x000D                   lt td gt data 5 lt  td gt  x000D                   lt td gt data 6 lt  td gt  x000D                   lt td gt data 7 lt  td gt  x000D               lt  tr gt  x000D               lt tr gt  x000D                   lt td gt data 1 lt  td gt  x000D                   lt td gt data 2 lt  td gt  x000D                   lt td gt data 3 lt  td gt  x000D                   lt td gt data 4 lt  td gt  x000D                   lt td gt data 5 lt  td gt  x000D                   lt td gt data 6 lt  td gt  x000D                   lt td gt data 7 lt  td gt  x000D               lt  tr gt  x000D               lt tr gt  x000D                   lt td gt data 1 lt  td gt  x000D                   lt td gt data 2 lt  td gt  x000D                   lt td gt data 3 lt  td gt  x000D                   lt td gt data 4 lt  td gt  x000D                   lt td gt data 5 lt  td gt  x000D                   lt td gt data 6 lt  td gt  x000D                   lt td gt data 7 lt  td gt  x000D               lt  tr gt  x000D               lt tr gt  x000D                   lt td gt data 1 lt  td gt  x000D                   lt td gt data 2 lt  td gt  x000D                   lt td gt data 3 lt  td gt  x000D                   lt td gt data 4 lt  td gt  x000D                   lt td gt data 5 lt  td gt  x000D                   lt td gt data 6 lt  td gt  x000D                   lt td gt data 7 lt  td gt  x000D               lt  tr gt  x000D               lt tr gt  x000D                   lt td gt data 1 lt  td gt  x000D                   lt td gt data 2 lt  td gt  x000D                   lt td gt data 3 lt  td gt  x000D                   lt td gt data 4 lt  td gt  x000D                   lt td gt data 5 lt  td gt  x000D                   lt td gt data 6 lt  td gt  x000D                   lt td gt data 7 lt  td gt  x000D               lt  tr gt  x000D               lt tr gt  x000D                   lt td gt data 1 lt  td gt  x000D                   lt td gt data 2 lt  td gt  x000D                   lt td gt data 3 lt  td gt  x000D                   lt td gt data 4 lt  td gt  x000D                   lt td gt data 5 lt  td gt  x000D                   lt td gt data 6 lt  td gt  x000D                   lt td gt data 7 lt  td gt  x000D               lt  tr gt  x000D               lt tr gt  x000D                   lt td gt data 1 lt  td gt  x000D                   lt td gt data 2 lt  td gt  x000D                   lt td gt data 3 lt  td gt  x000D                   lt td gt data 4 lt  td gt  x000D                   lt td gt data 5 lt  td gt  x000D                   lt td gt data 6 lt  td gt  x000D                   lt td gt data 7 lt  td gt  x000D               lt  tr gt  x000D               lt tr gt  x000D                   lt td gt data 1 lt  td gt  x000D                   lt td gt data 2 lt  td gt  x000D                   lt td gt data 3 lt  td gt  x000D                   lt td gt data 4 lt  td gt  x000D                   lt td gt data 5 lt  td gt  x000D                   lt td gt data 6 lt  td gt  x000D                   lt td gt data 7 lt  td gt  x000D               lt  tr gt  x000D               lt tr gt  x000D                   lt td gt data 1 lt  td gt  x000D                   lt td gt data 2 lt  td gt  x000D                   lt td gt data 3 lt  td gt  x000D                   lt td gt data 4 lt  td gt  x000D                   lt td gt data 5 lt  td gt  x000D                   lt td gt data 6 lt  td gt  x000D                   lt td gt data 7 lt  td gt  x000D               lt  tr gt  x000D               lt tr gt  x000D                   lt td gt data 1 lt  td gt  x000D                   lt td gt data 2 lt  td gt  x000D                   lt td gt data 3 lt  td gt  x000D                   lt td gt data 4 lt  td gt  x000D                   lt td gt data 5 lt  td gt  x000D                   lt td gt data 6 lt  td gt  x000D                   lt td gt data 7 lt  td gt  x000D               lt  tr gt  x000D           lt  tbody gt  x000D       lt  table gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Here is an improved answer to the one posted by Maximilian Hils   This one works in Internet nbsp Explorer nbsp 11 with no flickering whatsoever   var headerCells   tableWrap querySelectorAll  thead td    for  var i   0  i  lt  headerCells length  i          var headerCell   headerCells i       headerCell style backgroundColor    silver     var lastSTop   tableWrap scrollTop  tableWrap addEventListener  scroll   function          var stop   this scrollTop      if  stop  lt  lastSTop               Resetting the transform for the scrolling up to hide the headers         for  var i   0  i  lt  headerCells length  i                  headerCells i  style transitionDelay    0s               headerCells i  style transform                           lastSTop   stop      var translate    translate 0     stop    px        for  var i   0  i  lt  headerCells length  i              headerCells i  style transitionDelay    0 25s           headerCells i  style transform   translate

User · Answer

I was looking for a solution for this for a while and found most of the answers are not working or not suitable for my situation  so I wrote a simple solution with jQuery   This is the solution outline    Clone the table that needs to have a fixed header  and place the cloned copy on top of the original  Remove the table body from top table  Remove the table header from bottom table  Adjust the column widths   We keep track of the original column widths    Below is the code in a runnable demo    x000D   x000D  function scrolify tblAsJQueryObject  height    x000D    var oTbl   tblAsJQueryObject  x000D   x000D       for very large tables you can remove the four lines below x000D       and wrap the table with  lt div gt  in the mark-up and assign x000D       height and overflow property   x000D    var oTblDiv       lt div  gt     x000D    oTblDiv css  height   height   x000D    oTblDiv css  overflow    scroll    x000D    oTbl wrap oTblDiv   x000D   x000D       save original width x000D    oTbl attr  data-item-original-width   oTbl width     x000D    oTbl find  thead tr td   each function     x000D        this  attr  data-item-original-width     this  width     x000D        x000D    oTbl find  tbody tr eq 0  td   each function     x000D        this  attr  data-item-original-width     this  width     x000D        x000D   x000D   x000D       clone the original table x000D    var newTbl   oTbl clone    x000D   x000D       remove table header from original table x000D    oTbl find  thead tr   remove    x000D       remove table body from new table x000D    newTbl find  tbody tr   remove    x000D   x000D    oTbl parent   parent   prepend newTbl   x000D    newTbl wrap   lt div  gt     x000D   x000D       replace ORIGINAL COLUMN width     x000D    newTbl width newTbl attr  data-item-original-width     x000D    newTbl find  thead tr td   each function     x000D        this  width   this  attr  data-item-original-width     x000D        x000D    oTbl width oTbl attr  data-item-original-width     x000D    oTbl find  tbody tr eq 0  td   each function     x000D        this  width   this  attr  data-item-original-width     x000D        x000D    x000D   x000D    document  ready function     x000D    scrolify     tblNeedsScrolling    160      160 is height x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 6 4 jquery min js  gt  lt  script gt  x000D   x000D   lt div style  width 300px border 6px green solid   gt  x000D     lt table border  1  width  100   id  tblNeedsScrolling  gt  x000D       lt thead gt  x000D         lt tr gt  lt th gt Header 1 lt  th gt  lt th gt Header 2 lt  th gt  lt  tr gt  x000D       lt  thead gt  x000D       lt tbody gt  x000D         lt tr gt  lt td gt row 1  cell 1 lt  td gt  lt td gt row 1  cell 2 lt  td gt  lt  tr gt  x000D         lt tr gt  lt td gt row 2  cell 1 lt  td gt  lt td gt row 2  cell 2 lt  td gt  lt  tr gt  x000D         lt tr gt  lt td gt row 3  cell 1 lt  td gt  lt td gt row 3  cell 2 lt  td gt  lt  tr gt  x000D         lt tr gt  lt td gt row 4  cell 1 lt  td gt  lt td gt row 4  cell 2 lt  td gt  lt  tr gt     x000D         lt tr gt  lt td gt row 5  cell 1 lt  td gt  lt td gt row 5  cell 2 lt  td gt  lt  tr gt  x000D         lt tr gt  lt td gt row 6  cell 1 lt  td gt  lt td gt row 6  cell 2 lt  td gt  lt  tr gt  x000D         lt tr gt  lt td gt row 7  cell 1 lt  td gt  lt td gt row 7  cell 2 lt  td gt  lt  tr gt  x000D         lt tr gt  lt td gt row 8  cell 1 lt  td gt  lt td gt row 8  cell 2 lt  td gt  lt  tr gt     x000D       lt  tbody gt  x000D     lt  table gt  x000D   lt  div gt  x000D   x000D   x000D    This solution works in Chrome and IE  Since it is based on jQuery  this should work in other jQuery supported browsers as well

User · Answer

This is not an exact solution to the fixed header row  but I have created a rather ingenious method of repeating the header row throughout the long table  yet still keeping the ability to sort   This neat little option requires the jQuery tablesorter plugin  Here s how it works   HTML   lt table class  tablesorter boxlist  id  pmtable  gt       lt thead class  fixedheader  gt           lt tr class  boxheadrow  gt               lt th width  70px  class  header  gt Job Number lt  th gt               lt th width  10px  class  header  gt Pri lt  th gt               lt th width  70px  class  header  gt CLLI lt  th gt               lt th width  35px  class  header  gt Market lt  th gt               lt th width  35px  class  header  gt Job Status lt  th gt               lt th width  65px  class  header  gt Technology lt  th gt               lt th width  95px   class  header headerSortDown  gt MEI lt  th gt               lt th width  95px  class  header  gt TEO Writer lt  th gt               lt th width  75px  class  header  gt Quote Due lt  th gt               lt th width  100px  class  header  gt Engineer lt  th gt               lt th width  75px  class  header  gt ML Due lt  th gt               lt th width  75px  class  header  gt ML Complete lt  th gt               lt th width  75px  class  header  gt SPEC Due lt  th gt               lt th width  75px  class  header  gt SPEC Complete lt  th gt               lt th width  100px  class  header  gt Install Supervisor lt  th gt               lt th width  75px  class  header  gt MasTec OJD lt  th gt               lt th width  75px  class  header  gt Install Start lt  th gt               lt th width  30px  class  header  gt Install Hours lt  th gt               lt th width  75px  class  header  gt Revised CRCD lt  th gt               lt th width  75px  class  header  gt Latest Ship-To-Site lt  th gt               lt th width  30px  class  header  gt Total Parts lt  th gt               lt th width  30px  class  header  gt OEM Rcvd lt  th gt               lt th width  30px  class  header  gt Minor Rcvd lt  th gt               lt th width  30px  class  header  gt Total Received lt  th gt               lt th width  30px  class  header  gt   On Site lt  th gt               lt th width  60px  class  header  gt Actions lt  th gt           lt  tr gt       lt  thead gt           lt tbody class  scrollable  gt               lt tr data-job id  3548  data-ml id    class  odd  gt                   lt td class  c black  gt FL-8-RG9UP lt  td gt                   lt td data-pri  2  class  priority c yellow  gt M lt  td gt                   lt td class  c  gt FTLDFLOV lt  td gt                   lt td class  c  gt SFL lt  td gt                   lt td class  c  gt NOI lt  td gt                   lt td class  c  gt TRANSPORT lt  td gt                   lt td class  c  gt  lt  td gt                   lt td class  c  gt Chris Byrd lt  td gt                   lt td class  c  gt Apr 13  2013 lt  td gt                   lt td class  c  gt Kris Hall lt  td gt                   lt td class  c  gt May 20  2013 lt  td gt                   lt td class  c  gt May 20  2013 lt  td gt                   lt td class  c  gt Jun 5  2013 lt  td gt                   lt td class  c  gt Jun 7  2013 lt  td gt                   lt td class  c  gt Joseph Fitz lt  td gt                   lt td class  c  gt Jun 10  2013 lt  td gt                   lt td class  c  gt TBD lt  td gt                   lt td class  c  gt 123 lt  td gt                   lt td class  c revised crcd  gt  lt input readonly  true  name  revised crcd  value  Jul 26  2013  type  text  size  12  class  smInput r crcd c hasDatepicker  id  dp1377194058616  gt  lt  td gt                   lt td class  c  gt TBD lt  td gt                   lt td class  c  gt N A lt  td gt                   lt td class  c  gt N A lt  td gt                   lt td class  c  gt N A lt  td gt                   lt td class  c  gt N A lt  td gt                   lt td class  c  gt N A lt  td gt                   lt td class  actions  gt  lt span style  float left   class  ui-icon ui-icon-folder-open editJob  title  View this job  s    details     gt  lt  span gt  lt  td gt               lt  tr gt               lt tr data-job id  4264  data-ml id  2959  class  even  gt                   lt td class  c black  gt MTS13009SF lt  td gt                   lt td data-pri  2  class  priority c yellow  gt M lt  td gt                   lt td class  c  gt OJUSFLTL lt  td gt                   lt td class  c  gt SFL lt  td gt                   lt td class  c  gt NOI lt  td gt                   lt td class  c  gt TRANSPORT lt  td gt                   lt td class  c  gt  lt  td gt                   lt td class  c  gt DeMarcus Stewart lt  td gt                   lt td class  c  gt May 22  2013 lt  td gt                   lt td class  c  gt Ryan Alsobrook lt  td gt                   lt td class  c  gt Jun 19  2013 lt  td gt                   lt td class  c  gt Jun 27  2013 lt  td gt                   lt td class  c  gt Jun 19  2013 lt  td gt                   lt td class  c  gt Jul 4  2013 lt  td gt                   lt td class  c  gt Randy Williams lt  td gt                   lt td class  c  gt Jun 21  2013 lt  td gt                   lt td class  c  gt TBD lt  td gt                   lt td class  c  gt 95 lt  td gt                   lt td class  c revised crcd  gt  lt input readonly  true  name  revised crcd  value  Aug 9  2013  type  text  size  12  class  smInput r crcd c hasDatepicker  id  dp1377194058632  gt  lt  td gt  lt td class  c  gt TBD lt  td gt                   lt td class  c  gt 0 lt  td gt                   lt td class  c  gt 0 00  lt  td gt                   lt td class  c  gt 0 00  lt  td gt                   lt td class  c  gt 0 00  lt  td gt                   lt td class  c  gt 0 00  lt  td gt                   lt td class  actions  gt  lt span style  float left   class  ui-icon ui-icon-folder-open editJob  title  View this job  s    details     gt  lt  span gt  lt input style  float left   type  hidden  name  req ship  class  reqShip hasDatepicker  id  dp1377194058464  gt  lt span style  float left   class  ui-icon ui-icon-calendar requestShip  title  Schedule this job for shipping  gt  lt  span gt  lt span class  ui-icon ui-icon-info viewOrderInfo  style  float left   title  Show material details for this order  gt  lt  span gt  lt  td gt               lt  tr gt                                                                       lt tr class  boxheadrow repeated-header  gt                   lt th width  70px  class  header  gt Job Number lt  th gt                   lt th width  10px  class  header  gt Pri lt  th gt                   lt th width  70px  class  header  gt CLLI lt  th gt                   lt th width  35px  class  header  gt Market lt  th gt                   lt th width  35px  class  header  gt Job Status lt  th gt                   lt th width  65px  class  header  gt Technology lt  th gt                   lt th width  95px   class  header  gt MEI lt  th gt                   lt th width  95px  class  header  gt TEO Writer lt  th gt                   lt th width  75px  class  header  gt Quote Due lt  th gt                   lt th width  100px  class  header  gt Engineer lt  th gt                   lt th width  75px  class  header  gt ML Due lt  th gt                   lt th width  75px  class  header  gt ML Complete lt  th gt                   lt th width  75px  class  header  gt SPEC Due lt  th gt                   lt th width  75px  class  header  gt SPEC Complete lt  th gt                   lt th width  100px  class  header  gt Install Supervisor lt  th gt                   lt th width  75px  class  header  gt MasTec OJD lt  th gt                   lt th width  75px  class  header  gt Install Start lt  th gt                   lt th width  30px  class  header  gt Install Hours lt  th gt                   lt th width  75px  class  header  gt Revised CRCD lt  th gt                   lt th width  75px  class  header  gt Latest Ship-To-Site lt  th gt                   lt th width  30px  class  header  gt Total Parts lt  th gt                   lt th width  30px  class  header  gt OEM Rcvd lt  th gt                   lt th width  30px  class  header  gt Minor Rcvd lt  th gt                   lt th width  30px  class  header  gt Total Received lt  th gt                   lt th width  30px  class  header  gt   On Site lt  th gt                   lt th width  60px  class  header  gt Actions lt  th gt               lt  tr gt    Obviously  my table has many more rows than this  193 to be exact  but you can see where the header row repeats  The repeating header row is set up by this function   jQuery     Clone the original header row and add the  repeated-header  class var tblHeader      tr boxheadrow   clone   addClass  repeated-header        Add the cloned header with the new class every 34th row  or as you see fit     tbody tr odd nth-of-type 17n    after tblHeader       On the  sortStart  routine  remove all the inserted header rows     pmtable   bind  sortStart   function             repeated-header   remove           On the  sortEnd  routine  add back all the header row lines     bind  sortEnd   function            tbody tr odd nth-of-type 17n    after tblHeader

User · Answer

Use the latest version of jQuery  and include the following JavaScript code     window  scroll function         id of the div element   offset  top   window  scrollTop

User · Answer

By applying the StickyTableHeaders jQuery plugin to the table  the column headers will stick to the top of the viewport as you scroll down    Example    x000D   x000D    function      x000D         table   stickyTableHeaders    x000D      x000D   x000D      Copyright  c  2011 by Jonas Mosbech - https   github com jmosbech StickyTableHeaders x000D   MIT license info  https   github com jmosbech StickyTableHeaders blob master license txt    x000D   x000D    x000D   function     window  undefined    x000D       use strict   x000D   x000D      var name    stickyTableHeaders   x000D          id   0  x000D          defaults     x000D              fixedOffset  0  x000D              leftOffset  0  x000D              marginTop  0  x000D              scrollableArea  window x000D             x000D   x000D      function Plugin el  options    x000D             To avoid scope issues  use  base  instead of  this  x000D             to reference this class from internal events and functions  x000D          var base   this  x000D   x000D             Access to jQuery and DOM versions of element x000D          base  el     el   x000D          base el   el  x000D          base id   id    x000D          base  window     window   x000D          base  document     document   x000D   x000D             Listen for destroyed  call teardown x000D          base  el bind  destroyed   x000D            proxy base teardown  base    x000D   x000D             Cache DOM refs for performance reasons x000D          base  clonedHeader   null  x000D          base  originalHeader   null  x000D   x000D             Keep track of state x000D          base isSticky   false  x000D          base hasBeenSticky   false  x000D          base leftOffset   null  x000D          base topOffset   null  x000D   x000D          base init   function      x000D              base  el each function      x000D                  var  this     this   x000D   x000D                     remove padding on  lt table gt  to fix issue  7 x000D                   this css  padding   0   x000D   x000D                  base  originalHeader      thead first   this   x000D                  base  clonedHeader   base  originalHeader clone    x000D                   this trigger  clonedHeader     name   base  clonedHeader    x000D   x000D                  base  clonedHeader addClass  tableFloatingHeader    x000D                  base  clonedHeader css  display    none    x000D   x000D                  base  originalHeader addClass  tableFloatingHeaderOriginal    x000D   x000D                  base  originalHeader after base  clonedHeader   x000D   x000D                  base  printStyle       lt style type  text css  media  print  gt     x000D                        tableFloatingHeader display none  important      x000D                        tableFloatingHeaderOriginal position static  important      x000D                        lt  style gt     x000D                     head   append base  printStyle   x000D                  x000D   x000D              base setOptions options   x000D              base updateWidth    x000D              base toggleHeaders    x000D              base bind    x000D             x000D   x000D          base destroy   function      x000D              base  el unbind  destroyed   base teardown   x000D              base teardown    x000D             x000D   x000D          base teardown   function      x000D              if  base isSticky    x000D                  base  originalHeader css  position    static    x000D                x000D                removeData base el   plugin     name   x000D              base unbind    x000D   x000D              base  clonedHeader remove    x000D              base  originalHeader removeClass  tableFloatingHeaderOriginal    x000D              base  originalHeader css  visibility    visible    x000D              base  printStyle remove    x000D   x000D              base el   null  x000D              base  el   null  x000D             x000D   x000D          base bind   function      x000D              base  scrollableArea on  scroll     name  base toggleHeaders   x000D              if   base isWindowScrolling    x000D                  base  window on  scroll     name   base id  base setPositionValues   x000D                  base  window on  resize     name   base id  base toggleHeaders   x000D                x000D              base  scrollableArea on  resize     name  base toggleHeaders   x000D              base  scrollableArea on  resize     name  base updateWidth   x000D             x000D   x000D          base unbind   function      x000D                 unbind window events by specifying handle so we don t remove too much x000D              base  scrollableArea off       name  base toggleHeaders   x000D              if   base isWindowScrolling    x000D                  base  window off       name   base id  base setPositionValues   x000D                  base  window off       name   base id  base toggleHeaders   x000D                x000D              base  scrollableArea off       name  base updateWidth   x000D             x000D   x000D          base toggleHeaders   function      x000D              if  base  el    x000D                  base  el each function      x000D                      var  this     this   x000D                          newLeft  x000D                          newTopOffset   base isWindowScrolling     x000D                          isNaN base options fixedOffset    base options fixedOffset outerHeight     base options fixedOffset    base  scrollableArea offset   top     isNaN base options fixedOffset    base options fixedOffset   0   x000D                          offset    this offset    x000D   x000D                          scrollTop   base  scrollableArea scrollTop     newTopOffset  x000D                          scrollLeft   base  scrollableArea scrollLeft    x000D   x000D                          scrolledPastTop   base isWindowScrolling   scrollTop  gt  offset top   newTopOffset  gt  offset top  x000D                          notScrolledPastBottom    base isWindowScrolling   scrollTop   0   lt   offset top    this height   - base  clonedHeader height   -  base isWindowScrolling   0   newTopOffset    x000D   x000D                      if  scrolledPastTop  amp  amp  notScrolledPastBottom    x000D                          newLeft   offset left - scrollLeft   base options leftOffset  x000D                          base  originalHeader css   x000D                               position    fixed   x000D                                   margin-top   base options marginTop  x000D                                   left   newLeft  x000D                                   z-index   3     18  opacity bug x000D                              x000D                          base leftOffset   newLeft  x000D                          base topOffset   newTopOffset  x000D                          base  clonedHeader css  display        x000D                          if   base isSticky    x000D                              base isSticky   true  x000D                                 make sure the width is correct  the user might have resized the browser while in static mode x000D                              base updateWidth    x000D                            x000D                          base setPositionValues    x000D                        else if  base isSticky    x000D                          base  originalHeader css  position    static    x000D                          base  clonedHeader css  display    none    x000D                          base isSticky   false  x000D                          base resetWidth    td th   base  clonedHeader      td th   base  originalHeader    x000D                        x000D                      x000D                x000D             x000D   x000D          base setPositionValues   function      x000D              var winScrollTop   base  window scrollTop    x000D                  winScrollLeft   base  window scrollLeft    x000D              if   base isSticky    winScrollTop  lt  0    winScrollTop   base  window height    gt  base  document height      winScrollLeft  lt  0    winScrollLeft   base  window width    gt  base  document width      x000D                  return  x000D                x000D              base  originalHeader css   x000D                   top   base topOffset -  base isWindowScrolling   0   winScrollTop   x000D                       left   base leftOffset -  base isWindowScrolling   0   winScrollLeft  x000D                  x000D             x000D   x000D          base updateWidth   function      x000D              if   base isSticky    x000D                  return  x000D                x000D                 Copy cell widths from clone x000D              if   base  originalHeaderCells    x000D                  base  originalHeaderCells      th td   base  originalHeader   x000D                x000D              if   base  clonedHeaderCells    x000D                  base  clonedHeaderCells      th td   base  clonedHeader   x000D                x000D              var cellWidths   base getWidth base  clonedHeaderCells   x000D              base setWidth cellWidths  base  clonedHeaderCells  base  originalHeaderCells   x000D   x000D                 Copy row width from whole table x000D              base  originalHeader css  width   base  clonedHeader width     x000D             x000D   x000D          base getWidth   function   clonedHeaders    x000D              var widths       x000D               clonedHeaders each function  index    x000D                  var width   this     this   x000D   x000D                  if   this css  box-sizing        border-box     x000D                      width    this 0  getBoundingClientRect   width      39  border-box bug x000D                    else   x000D                      var  origTh      th   base  originalHeader   x000D                      if   origTh css  border-collapse        collapse     x000D                          if  window getComputedStyle    x000D                              width   parseFloat window getComputedStyle this  null  width   x000D                            else   x000D                                 ie8 only x000D                              var leftPadding   parseFloat  this css  padding-left     x000D                              var rightPadding   parseFloat  this css  padding-right     x000D                                 Needs more investigation - this is assuming constant border around this cell and it s neighbours  x000D                              var border   parseFloat  this css  border-width     x000D                              width    this outerWidth   - leftPadding - rightPadding - border  x000D                            x000D                        else   x000D                          width    this width    x000D                        x000D                    x000D   x000D                  widths index    width  x000D                  x000D              return widths  x000D             x000D   x000D          base setWidth   function  widths   clonedHeaders   origHeaders    x000D               clonedHeaders each function  index    x000D                  var width   widths index   x000D                   origHeaders eq index  css   x000D                       min-width   width  x000D                           max-width   width x000D                      x000D                  x000D             x000D   x000D          base resetWidth   function   clonedHeaders   origHeaders    x000D               clonedHeaders each function  index    x000D                  var  this     this   x000D                   origHeaders eq index  css   x000D                       min-width    this css  min-width    x000D                           max-width    this css  max-width   x000D                      x000D                  x000D             x000D   x000D          base setOptions   function  options    x000D              base options     extend     defaults  options   x000D              base  scrollableArea     base options scrollableArea   x000D              base isWindowScrolling   base  scrollableArea 0      window  x000D             x000D   x000D          base updateOptions   function  options    x000D              base setOptions options   x000D                 scrollableArea might have changed x000D              base unbind    x000D              base bind    x000D              base updateWidth    x000D              base toggleHeaders    x000D             x000D   x000D             Run initializer x000D          base init    x000D        x000D   x000D         A plugin wrapper around the constructor  x000D         preventing against multiple instantiations x000D        fn name    function  options    x000D          return this each function      x000D              var instance     data this   plugin     name   x000D              if  instance    x000D                  if  typeof options      string     x000D                      instance options  apply instance   x000D                    else   x000D                      instance updateOptions options   x000D                    x000D                else if  options      destroy     x000D                    data this   plugin     name  new Plugin this  options    x000D                x000D              x000D         x000D   x000D     jQuery  window   x000D  body   x000D      margin  0 auto  x000D      padding  0 20px  x000D      font-family  Arial  Helvetica  sans-serif  x000D      font-size  11px  x000D      color   555  x000D    x000D  table   x000D      border  0  x000D      padding  0  x000D      margin  0 0 20px 0  x000D      border-collapse  collapse  x000D    x000D  th   x000D      padding  5px  x000D         NOTE  th padding must be set explicitly in order to support IE    x000D      text-align  right  x000D      font-weight bold  x000D      line-height  2em  x000D      color   FFF  x000D      background-color   555  x000D    x000D  tbody td   x000D      padding  10px  x000D      line-height  18px  x000D      border-top  1px solid  E0E0E0  x000D    x000D  tbody tr nth-child 2n    x000D      background-color   F7F7F7  x000D    x000D  tbody tr hover   x000D      background-color   EEEEEE  x000D    x000D  td   x000D      text-align  right  x000D    x000D  td first-child  th first-child   x000D      text-align  left  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 9 1 jquery min js  gt  lt  script gt  x000D   lt div style  width 3000px  gt some really really wide content goes here lt  div gt  x000D   lt table gt  x000D       lt thead gt  x000D           lt tr gt  x000D               lt th colspan  9  gt Companies listed on NASDAQ OMX Copenhagen  lt  th gt  x000D           lt  tr gt  x000D           lt tr gt  x000D               lt th gt Full name lt  th gt  x000D               lt th gt CCY lt  th gt  x000D               lt th gt Last lt  th gt  x000D               lt th gt   - lt  th gt  x000D               lt th gt   lt  th gt  x000D               lt th gt Bid lt  th gt  x000D               lt th gt Ask lt  th gt  x000D               lt th gt Volume lt  th gt  x000D               lt th gt Turnover lt  th gt  x000D           lt  tr gt  x000D       lt  thead gt  x000D       lt tbody gt  x000D           lt tr gt  x000D               lt td gt A P  M  ller    lt  td gt  x000D               lt td gt DKK lt  td gt  x000D               lt td gt 33 220 00 lt  td gt  x000D               lt td gt 760 lt  td gt  x000D               lt td gt 2 34 lt  td gt  x000D               lt td gt 33 140 00 lt  td gt  x000D               lt td gt 33 220 00 lt  td gt  x000D               lt td gt 594 lt  td gt  x000D               lt td gt 19 791 910 lt  td gt  x000D           lt  tr gt  x000D           lt tr gt  x000D               lt td gt A P  M  ller    lt  td gt  x000D               lt td gt DKK lt  td gt  x000D               lt td gt 34 620 00 lt  td gt  x000D               lt td gt 640 lt  td gt  x000D               lt td gt 1 88 lt  td gt  x000D               lt td gt 34 620 00 lt  td gt  x000D               lt td gt 34 700 00 lt  td gt  x000D               lt td gt 9 954 lt  td gt  x000D               lt td gt 346 530 246 lt  td gt  x000D           lt  tr gt  x000D           lt tr gt  x000D               lt td gt Carlsberg A lt  td gt  x000D               lt td gt DKK lt  td gt  x000D               lt td gt 380 lt  td gt  x000D               lt td gt 0 lt  td gt  x000D               lt td gt 0 lt  td gt  x000D               lt td gt 371 lt  td gt  x000D               lt td gt 391 5 lt  td gt  x000D               lt td gt 6 lt  td gt  x000D               lt td gt 2 280 lt  td gt  x000D           lt  tr gt  x000D           lt tr gt  x000D               lt td gt Carlsberg B lt  td gt  x000D               lt td gt DKK lt  td gt  x000D               lt td gt 364 4 lt  td gt  x000D               lt td gt 8 6 lt  td gt  x000D               lt td gt 2 42 lt  td gt  x000D               lt td gt 363 lt  td gt  x000D               lt td gt 364 4 lt  td gt  x000D               lt td gt 636 267 lt  td gt  x000D               lt td gt 228 530 601 lt  td gt  x000D           lt  tr gt  x000D           lt tr gt  x000D               lt td gt Chr  Hansen    lt  td gt  x000D               lt td gt DKK lt  td gt  x000D               lt td gt 114 5 lt  td gt  x000D               lt td gt -1 6 lt  td gt  x000D               lt td gt -1 38 lt  td gt  x000D               lt td gt 114 2 lt  td gt  x000D               lt td gt 114 5 lt  td gt  x000D               lt td gt 141 822 lt  td gt  x000D               lt td gt 16 311 454 lt  td gt  x000D           lt  tr gt  x000D           lt tr gt  x000D               lt td gt Coloplast B lt  td gt  x000D               lt td gt DKK lt  td gt  x000D               lt td gt 809 5 lt  td gt  x000D               lt td gt 11 lt  td gt  x000D               lt td gt 1 38 lt  td gt  x000D               lt td gt 809 lt  td gt  x000D               lt td gt 809 5 lt  td gt  x000D               lt td gt 85 840 lt  td gt  x000D               lt td gt 69 363 301 lt  td gt  x000D           lt  tr gt  x000D           lt tr gt  x000D               lt td gt D S Norden lt  td gt  x000D               lt td gt DKK lt  td gt  x000D               lt td gt 155 lt  td gt  x000D               lt td gt -1 5 lt  td gt  x000D               lt td gt -0 96 lt  td gt  x000D               lt td gt 155 lt  td gt  x000D               lt td gt 155 1 lt  td gt  x000D               lt td gt 51 681 lt  td gt  x000D               lt td gt 8 037 225 lt  td gt  x000D           lt  tr gt  x000D           lt tr gt  x000D               lt td gt Danske Bank lt  td gt  x000D               lt td gt DKK lt  td gt  x000D               lt td gt 69 05 lt  td gt  x000D               lt td gt 2 55 lt  td gt  x000D               lt td gt 3 83 lt  td gt  x000D               lt td gt 69 05 lt  td gt  x000D               lt td gt 69 2 lt  td gt  x000D               lt td gt 1 723 719 lt  td gt  x000D               lt td gt 115 348 068 lt  td gt  x000D           lt  tr gt  x000D           lt tr gt  x000D               lt td gt DSV lt  td gt  x000D               lt td gt DKK lt  td gt  x000D               lt td gt 105 4 lt  td gt  x000D               lt td gt 0 2 lt  td gt  x000D               lt td gt 0 19 lt  td gt  x000D               lt td gt 105 2 lt  td gt  x000D               lt td gt 105 4 lt  td gt  x000D               lt td gt 674 873 lt  td gt  x000D               lt td gt 71 575 035 lt  td gt  x000D           lt  tr gt  x000D           lt tr gt  x000D               lt td gt FLSmidth  amp amp  Co  lt  td gt  x000D               lt td gt DKK lt  td gt  x000D               lt td gt 295 8 lt  td gt  x000D               lt td gt -1 8 lt  td gt  x000D               lt td gt -0 6 lt  td gt  x000D               lt td gt 295 1 lt  td gt  x000D               lt td gt 295 8 lt  td gt  x000D               lt td gt 341 263 lt  td gt  x000D               lt td gt 100 301 032 lt  td gt  x000D           lt  tr gt  x000D           lt tr gt  x000D               lt td gt G4S plc lt  td gt  x000D               lt td gt DKK lt  td gt  x000D               lt td gt 22 53 lt  td gt  x000D               lt td gt 0 05 lt  td gt  x000D               lt td gt 0 22 lt  td gt  x000D               lt td gt 22 53 lt  td gt  x000D               lt td gt 22 57 lt  td gt  x000D               lt td gt 190 920 lt  td gt  x000D               lt td gt 4 338 150 lt  td gt  x000D           lt  tr gt  x000D           lt tr gt  x000D               lt td gt Jyske Bank lt  td gt  x000D               lt td gt DKK lt  td gt  x000D               lt td gt 144 2 lt  td gt  x000D               lt td gt 1 4 lt  td gt  x000D               lt td gt 0 98 lt  td gt  x000D               lt td gt 142 8 lt  td gt  x000D               lt td gt 144 2 lt  td gt  x000D               lt td gt 78 163 lt  td gt  x000D               lt td gt 11 104 874 lt  td gt  x000D           lt  tr gt  x000D           lt tr gt  x000D               lt td gt K  benhavns     lt  td gt  x000D               lt td gt DKK lt  td gt  x000D               lt td gt 1 580 00 lt  td gt  x000D               lt td gt -12 lt  td gt  x000D               lt td gt -0 75 lt  td gt  x000D               lt td gt 1 590 00 lt  td gt  x000D               lt td gt 1 620 00 lt  td gt  x000D               lt td gt 82 lt  td gt  x000D               lt td gt 131 110 lt  td gt  x000D           lt  tr gt  x000D           lt tr gt  x000D               lt td gt Lundbeck lt  td gt  x000D               lt td gt DKK lt  td gt  x000D               lt td gt 103 4 lt  td gt  x000D               lt td gt -2 5 lt  td gt  x000D               lt td gt -2 36 lt  td gt  x000D               lt td gt 103 4 lt  td gt  x000D               lt td gt 103 8 lt  td gt  x000D               lt td gt 157 162 lt  td gt  x000D               lt td gt 16 462 282 lt  td gt  x000D           lt  tr gt  x000D           lt tr gt  x000D               lt td gt Nordea Bank lt  td gt  x000D               lt td gt DKK lt  td gt  x000D               lt td gt 43 22 lt  td gt  x000D               lt td gt -0 06 lt  td gt  x000D               lt td gt -0 14 lt  td gt  x000D               lt td gt 43 22 lt  td gt  x000D               lt td gt 43 25 lt  td gt  x000D               lt td gt 167 520 lt  td gt  x000D               lt td gt 7 310 143 lt  td gt  x000D           lt  tr gt  x000D           lt tr gt  x000D               lt td gt Novo Nordisk B lt  td gt  x000D               lt td gt DKK lt  td gt  x000D               lt td gt 552 5 lt  td gt  x000D               lt td gt -3 5 lt  td gt  x000D               lt td gt -0 63 lt  td gt  x000D               lt td gt 550 5 lt  td gt  x000D               lt td gt 552 5 lt  td gt  x000D               lt td gt 843 533 lt  td gt  x000D               lt td gt 463 962 375 lt  td gt  x000D           lt  tr gt  x000D           lt tr gt  x000D               lt td gt Novozymes B lt  td gt  x000D               lt td gt DKK lt  td gt  x000D               lt td gt 805 5 lt  td gt  x000D               lt td gt 5 5 lt  td gt  x000D               lt td gt 0 69 lt  td gt  x000D               lt td gt 805 lt  td gt  x000D               lt td gt 805 5 lt  td gt  x000D               lt td gt 152 188 lt  td gt  x000D               lt td gt 121 746 199 lt  td gt  x000D           lt  tr gt  x000D           lt tr gt  x000D               lt td gt Pandora lt  td gt  x000D               lt td gt DKK lt  td gt  x000D               lt td gt 39 04 lt  td gt  x000D               lt td gt 0 94 lt  td gt  x000D               lt td gt 2 47 lt  td gt  x000D               lt td gt 38 8 lt  td gt  x000D               lt td gt 39 04 lt  td gt  x000D               lt td gt 350 965 lt  td gt  x000D               lt td gt 13 611 838 lt  td gt  x000D           lt  tr gt  x000D           lt tr gt  x000D               lt td gt Rockwool In    lt  td gt  x000D               lt td gt DKK lt  td gt  x000D               lt td gt 492 lt  td gt  x000D               lt td gt 0 lt  td gt  x000D               lt td gt 0 lt  td gt  x000D               lt td gt 482 lt  td gt  x000D               lt td gt 492 lt  td gt  x000D               lt td gt  lt  td gt  x000D               lt td gt  lt  td gt  x000D           lt  tr gt  x000D           lt tr gt  x000D               lt td gt Rockwool In    lt  td gt  x000D               lt td gt DKK lt  td gt  x000D               lt td gt 468 lt  td gt  x000D               lt td gt 12 lt  td gt  x000D               lt td gt 2 63 lt  td gt  x000D               lt td gt 465 2 lt  td gt  x000D               lt td gt 468 lt  td gt  x000D               lt td gt 9 885 lt  td gt  x000D               lt td gt 4 623 850 lt  td gt  x000D           lt  tr gt  x000D           lt tr gt  x000D               lt td gt Sydbank lt  td gt  x000D               lt td gt DKK lt  td gt  x000D               lt td gt 95 lt  td gt  x000D               lt td gt 0 05 lt  td gt  x000D               lt td gt 0 05 lt  td gt  x000D               lt td gt 94 7 lt  td gt  x000D               lt td gt 95 lt  td gt  x000D               lt td gt 103 438 lt  td gt  x000D               lt td gt 9 802 899 lt  td gt  x000D           lt  tr gt  x000D           lt tr gt  x000D               lt td gt TDC lt  td gt  x000D               lt td gt DKK lt  td gt  x000D               lt td gt 43 6 lt  td gt  x000D               lt td gt 0 13 lt  td gt  x000D               lt td gt 0 3 lt  td gt  x000D               lt td gt 43 5 lt  td gt  x000D               lt td gt 43 6 lt  td gt  x000D               lt td gt 845 110 lt  td gt  x000D               lt td gt 36 785 339 lt  td gt  x000D           lt  tr gt  x000D           lt tr gt  x000D               lt td gt Topdanmark lt  td gt  x000D               lt td gt DKK lt  td gt  x000D               lt td gt 854 lt  td gt  x000D               lt td gt 13 5 lt  td gt  x000D               lt td gt 1 61 lt  td gt  x000D               lt td gt 854 lt  td gt  x000D               lt td gt 855 lt  td gt  x000D               lt td gt 38 679 lt  td gt  x000D               lt td gt 32 737 678 lt  td gt  x000D           lt  tr gt  x000D           lt tr gt  x000D               lt td gt Tryg lt  td gt  x000D               lt td gt DKK lt  td gt  x000D               lt td gt 290 4 lt  td gt  x000D               lt td gt 0 3 lt  td gt  x000D               lt td gt 0 1 lt  td gt  x000D               lt td gt 290 lt  td gt  x000D               lt td gt 290 4 lt  td gt  x000D               lt td gt 94 587 lt  td gt  x000D               lt td gt 27 537 247 lt  td gt  x000D           lt  tr gt  x000D           lt tr gt  x000D               lt td gt Vestas Wind    lt  td gt  x000D               lt td gt DKK lt  td gt  x000D               lt td gt 90 15 lt  td gt  x000D               lt td gt -4 2 lt  td gt  x000D               lt td gt -4 45 lt  td gt  x000D               lt td gt 90 1 lt  td gt  x000D               lt td gt 90 15 lt  td gt  x000D               lt td gt 1 317 313 lt  td gt  x000D               lt td gt 121 064 314 lt  td gt  x000D           lt  tr gt  x000D           lt tr gt  x000D               lt td gt William Dem    lt  td gt  x000D               lt td gt DKK lt  td gt  x000D               lt td gt 417 6 lt  td gt  x000D               lt td gt 0 1 lt  td gt  x000D               lt td gt 0 02 lt  td gt  x000D               lt td gt 417 lt  td gt  x000D               lt td gt 417 6 lt  td gt  x000D               lt td gt 64 242 lt  td gt  x000D               lt td gt 26 859 554 lt  td gt  x000D           lt  tr gt  x000D       lt  tbody gt  x000D   lt  table gt  x000D   lt div style  height  4000px  gt lots of content down here    lt  div gt  x000D   x000D   x000D

User · Answer

I like Maximillian Hils  answer but I had a some issues    the transform doesn t work in Edge or IE unless you apply it to the th the header flickers during scrolling in Edge and IE my table is loaded using ajax  so I wanted to attach to the window scroll event rather than the wrapper s scroll event   To get rid of the flicker  I use a timeout to wait until the user has finished scrolling  then I apply the transform - so the header is not visible during scrolling    I have also written this using jQuery  one advantage of that being that jQuery should handle vendor-prefixes for you      var isScrolling  lastTop  lastLeft  isLeftHidden  isTopHidden         Scroll events don t bubble https   stackoverflow com a 19375645 150342       so can t use   document  on  scroll     table-container-fixed   function  e        document addEventListener  scroll   function  event            var  container     event target           if    container hasClass  table-container-fixed                return                 transform needs to be applied to th for Edge and IE           in this example I am also fixing the leftmost column         var  topLeftCell    container find  table first  gt  thead  gt  tr  gt  th first            var  headerCells    topLeftCell siblings            var  columnCells    container             find  table first  gt  tbody  gt  tr  gt  td first-child                        table first  gt  tfoot  gt  tr  gt  td first-child               hide the cells while returning otherwise they show on top of the data         if   isLeftHidden                var currentLeft    container scrollLeft                if  currentLeft  lt  lastLeft                      scrolling left                 isLeftHidden   true                   topLeftCell css  visibility    hidden                     columnCells css  visibility    hidden                              lastLeft   currentLeft                     if   isTopHidden                var currentTop    container scrollTop                if  currentTop  lt  lastTop                      scrolling up                 isTopHidden   true                   topLeftCell css  visibility    hidden                     headerCells css  visibility    hidden                              lastTop   currentTop                        Using timeout to delay transform until user stops scrolling            Clear timeout while scrolling         window clearTimeout isScrolling               Set a timeout to run after scrolling ends         isScrolling   setTimeout function                    move the table cells               var x    container scrollLeft                var y    container scrollTop                  topLeftCell css  transform    translate     x    px      y    px                  headerCells css  transform    translateY     y    px                  columnCells css  transform    translateX     x    px                  isTopHidden   isLeftHidden   false               topLeftCell css  visibility    inherit                 headerCells css  visibility    inherit                 columnCells css  visibility    inherit               100           true     The table is wrapped in a div with the class table-container-fixed    table-container-fixed      overflow  auto      height  400px      I set border-collapse to separate because otherwise we lose borders during translation  and I remove the border on the table to stop content appearing just above the cell where the border was during scrolling    table-container-fixed  gt  table      border-collapse  separate     border none      I make the th background white to cover the cells underneath  and I add a border that matches the table border - which is styled using Bootstrap and scrolled out of view     table-container-fixed  gt  table  gt  thead  gt  tr  gt  th           border-top  1px solid  ddd  important          background-color  white                  z-index  10          position  relative   to make z-index work                       table-container-fixed  gt  table  gt  thead  gt  tr  gt  th first-child                   z-index  20                  table-container-fixed  gt  table  gt  tbody  gt  tr  gt  td first-child   table-container-fixed  gt  table  gt  tfoot  gt  tr  gt  td first-child       background-color  white              z-index  10      position  relative

User · Answer

This can be cleanly solved in four lines of code   If you only care about modern browsers  a fixed header can be achieved much easier by using CSS transforms  Sounds odd  but works great    HTML and CSS stay as-is  No external JavaScript dependencies  Four lines of code  Works for all configurations  table-layout  fixed  etc      document getElementById  wrap   addEventListener  scroll   function       var translate    translate 0   this scrollTop  px       this querySelector  thead   style transform   translate        Support for CSS transforms is widely available except for Internet nbsp Explorer nbsp 8-   Here is the full example for reference    x000D   x000D  document getElementById  wrap   addEventListener  scroll  function    x000D     var translate    translate 0   this scrollTop  px    x000D     this querySelector  thead   style transform   translate  x000D      x000D     Your existing container    x000D   wrap   x000D      overflow  auto  x000D      height  400px  x000D    x000D   x000D     CSS for demo    x000D  td   x000D      background-color  green  x000D      width  200px  x000D      height  100px  x000D    x000D   lt div id  wrap  gt  x000D       lt table gt  x000D           lt thead gt  x000D               lt tr gt  x000D                   lt th gt Foo lt  th gt  x000D                   lt th gt Bar lt  th gt  x000D               lt  tr gt  x000D           lt  thead gt  x000D           lt tbody gt  x000D               lt tr gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt  tr gt  x000D               lt tr gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt  tr gt  x000D               lt tr gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt  tr gt  x000D               lt tr gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt  tr gt  x000D               lt tr gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt  tr gt  x000D               lt tr gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt  tr gt  x000D               lt tr gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt  tr gt  x000D               lt tr gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt  tr gt  x000D               lt tr gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt  tr gt  x000D               lt tr gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt  tr gt  x000D               lt tr gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt  tr gt  x000D               lt tr gt  lt td gt  lt  td gt  lt td gt  lt  td gt  lt  tr gt  x000D           lt  tbody gt  x000D       lt  table gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

The CSS property position  sticky has great support in most modern browsers  I had issues with Edge  see below    This lets us solve the problem of fixed headers quite easily   thead th   position  sticky  top  0      Safari needs a vendor prefix  -webkit-sticky   For Firefox  I had to add min-height  0 to one the parent elements  I forget exactly why this was needed   Most unfortunately  the Microsoft Edge implementation seems to be only semi-working  At least  I had some flickering and misaligned table cells in my testing  The table was still usable  but had significant aesthetic issues

User · Answer

I wish I had found  Mark s solution earlier  but I went and wrote my own before I saw this SO question     Mine is a very lightweight jQuery plugin that supports fixed header  footer  column spanning  colspan   resizing  horizontal scrolling  and an optional number of rows to display before scrolling starts   jQuery scrollTableBody  GitHub   As long as you have a table with proper  lt thead gt    lt tbody gt   and  optional   lt tfoot gt   all you need to do is this      table   scrollTableBody

User · Answer

I ve just completed putting together a jQuery plugin that will take valid single table using valid HTML  have to have a thead and tbody  and will output a table that has fixed headers  optional fixed footer that can either be a cloned header or any content you chose  pagination  etc     If you want to take advantage of larger monitors it will also resize the table when the browser is resized   Another added feature is being able to side scroll if the table columns can not all fit in view   http   fixedheadertable com   on github  http   markmalek github com Fixed-Header-Table   It s extremely easy to setup and you can create your own custom styles for it   It also uses rounded corners in all browsers   Keep in mind I just released it  so it s still technically beta and there are very few minor issues I m ironing out   It works in Internet Explorer 7  Internet Explorer 8  Safari  Firefox and Chrome

User · Answer

I developed a simple light-weight jQuery plug-in for converting a well formatted HTML table to a scrollable table with fixed table header and columns   The plugin works well to match pixel-to-pixel positioning the fixed section with the scrollable section  Additionally  you could also freeze the number of columns that will be always in view when scrolling horizontally    Demo  amp  Documentation  http   meetselva github io fixed-table-rows-cols    GitHub repository  https   github com meetselva fixed-table-rows-cols  Below is the usage for a simple table with a fixed header      lt table selector gt   fxdHdrCol       width       100        height     200      colModal    width  30  align   center                    width  70  align   center                     width  200  align   left                     width  100  align   center                     width  70  align   center                     width  250  align   center

User · Answer

TL DR  If you target modern browsers and don t have extravagant styling needs  http   jsfiddle net dPixie byB9d 3      Although the big four version is pretty sweet as well this version handles fluid width a lot better   Good news everyone   With the advances of HTML5 and CSS3 this is now possible  at least for modern browsers  The slightly hackish implementation I came up with can be found here  http   jsfiddle net dPixie byB9d 3   I have tested it in FX 25  Chrome 31 and IE 10      Relevant HTML  insert a HTML5 doctype at the top of your document though     x000D   x000D  html  x000D  body   x000D    margin  0  x000D    padding  0  x000D    height  100   x000D    x000D   x000D  section   x000D    position  relative  x000D    border  1px solid  000  x000D    padding-top  37px  x000D    background   500  x000D    x000D   x000D  section positioned   x000D    position  absolute  x000D    top  100px  x000D    left  100px  x000D    width  800px  x000D    box-shadow  0 0 15px  333  x000D    x000D   x000D   container   x000D    overflow-y  auto  x000D    height  200px  x000D    x000D   x000D  table   x000D    border-spacing  0  x000D    width  100   x000D    x000D   x000D  td td   x000D    border-left  1px solid  eee  x000D    x000D   x000D  td  x000D  th   x000D    border-bottom  1px solid  eee  x000D    background   ddd  x000D    color   000  x000D    padding  10px 25px  x000D    x000D   x000D  th   x000D    height  0  x000D    line-height  0  x000D    padding-top  0  x000D    padding-bottom  0  x000D    color  transparent  x000D    border  none  x000D    white-space  nowrap  x000D    x000D   x000D  th div   x000D    position  absolute  x000D    background  transparent  x000D    color   fff  x000D    padding  9px 25px  x000D    top  0  x000D    margin-left  -25px  x000D    line-height  normal  x000D    border-left  1px solid  800  x000D    x000D   x000D  th first-child div   x000D    border  none  x000D    x000D   lt section class  positioned  gt  x000D     lt div class  container  gt  x000D       lt table gt  x000D         lt thead gt  x000D           lt tr class  header  gt  x000D             lt th gt  x000D              Table attribute name x000D               lt div gt Table attribute name lt  div gt  x000D             lt  th gt  x000D             lt th gt  x000D              Value x000D               lt div gt Value lt  div gt  x000D             lt  th gt  x000D             lt th gt  x000D              Description x000D               lt div gt Description lt  div gt  x000D             lt  th gt  x000D           lt  tr gt  x000D         lt  thead gt  x000D         lt tbody gt  x000D           lt tr gt  x000D             lt td gt align lt  td gt  x000D             lt td gt left  center  right lt  td gt  x000D             lt td gt Not supported in HTML5  Deprecated in HTML 4 01  Specifies the alignment of a table according to surrounding text lt  td gt  x000D           lt  tr gt  x000D           lt tr gt  x000D             lt td gt bgcolor lt  td gt  x000D             lt td gt rgb x x x    xxxxxx  colorname lt  td gt  x000D             lt td gt Not supported in HTML5  Deprecated in HTML 4 01  Specifies the background color for a table lt  td gt  x000D           lt  tr gt  x000D           lt tr gt  x000D             lt td gt border lt  td gt  x000D             lt td gt 1    lt  td gt  x000D             lt td gt Specifies whether the table cells should have borders or not lt  td gt  x000D           lt  tr gt  x000D           lt tr gt  x000D             lt td gt cellpadding lt  td gt  x000D             lt td gt pixels lt  td gt  x000D             lt td gt Not supported in HTML5  Specifies the space between the cell wall and the cell content lt  td gt  x000D           lt  tr gt  x000D           lt tr gt  x000D             lt td gt cellspacing lt  td gt  x000D             lt td gt pixels lt  td gt  x000D             lt td gt Not supported in HTML5  Specifies the space between cells lt  td gt  x000D           lt  tr gt  x000D           lt tr gt  x000D             lt td gt frame lt  td gt  x000D             lt td gt void  above  below  hsides  lhs  rhs  vsides  box  border lt  td gt  x000D             lt td gt Not supported in HTML5  Specifies which parts of the outside borders that should be visible lt  td gt  x000D           lt  tr gt  x000D           lt tr gt  x000D             lt td gt rules lt  td gt  x000D             lt td gt none  groups  rows  cols  all lt  td gt  x000D             lt td gt Not supported in HTML5  Specifies which parts of the inside borders that should be visible lt  td gt  x000D           lt  tr gt  x000D           lt tr gt  x000D             lt td gt summary lt  td gt  x000D             lt td gt text lt  td gt  x000D             lt td gt Not supported in HTML5  Specifies a summary of the content of a table lt  td gt  x000D           lt  tr gt  x000D           lt tr gt  x000D             lt td gt width lt  td gt  x000D             lt td gt pixels    lt  td gt  x000D             lt td gt Not supported in HTML5  Specifies the width of a table lt  td gt  x000D           lt  tr gt  x000D         lt  tbody gt  x000D       lt  table gt  x000D     lt  div gt  x000D   lt  section gt  x000D   x000D   x000D    But how    Simply put you have a table header  that you visually hide by making it 0px high  that also contains divs used as the fixed header  The table s container leaves enough room at the top to allow for the absolutely positioned header  and the table with scrollbars appear as you would expect   The code above uses the positioned class to position the table absolutely  I m using it in a popup style dialog  but you can use it in the flow of the document as well by removing the positioned class from the container   But      It s not perfect  Firefox refuses to make the header row 0px  at least I did not find any way  but stubbornly keeps it at minimum 4px     It s not a huge problem  but depending on your styling it will mess with your borders etc   The table is also using a faux column approach where the background color of the container itself is used as the background for the header divs  that are transparent   Summary  All in all there might be styling issues depending on your requirements  especially borders or complicated backgrounds  There might also be problems with computability  I haven t checked it in a wide variety of browsers yet  please comment with your experiences if you try it out   but I didn t find anything like it so I thought it was worth posting anyway

User · Answer

I also created a plugin that addresses this issue  My project - jQuery floatThead has been around for over 4 years now and is very mature   It requires no external styles and does not expect your table to be styled in any particular way  It supports Internet nbsp Explorer9  and Firefox Chrome   Currently  2018-05  it has      405 commits and 998 stars on GitHub     Many  not all  of the answers here are quick hacks that may have solved the problem one person was having  but will work not for every table   Some of the other plugins are old and probably work great with Internet nbsp Explorer  but will break on Firefox and Chrome

User · Answer

Support for fixed footer  I extended Nathan s function to also support a fixed footer and maximum height  Also  the function will set the CSS itself  and you only have to support a width   Usage   Fixed height      table   scrollableTable   height  100       Maximum height  if the browser supports the CSS  max-height  option       table   scrollableTable   maxHeight  100       Script   jQuery fn scrollableTable   function options         var  originalTable   headTable   bodyTable   footTable   scrollableDiv  originalWidths          Prepare the separate parts of the table      originalTable     this        headTable    originalTable clone          headTable find  tbody   remove         headTable find  tfoot   remove          bodyTable    originalTable clone         bodyTable find  thead   remove         bodyTable find  tfoot   remove          footTable    originalTable clone         footTable find  thead   remove         footTable find  tbody   remove            Grab the original column widths and set them in the separate tables     originalWidths    originalTable find  tr first td   map function             return   this  width                   each   headTable   bodyTable   footTable   function index   table             table find  tr first td   each function i                  this  width originalWidths i                                The div that makes the body table scroll      scrollableDiv       lt div  gt    css            overflow-y    scroll               if options height             scrollableDiv css   height   options height              else if options maxHeight             scrollableDiv css   max-height   options maxHeight                  Add the new separate tables and remove the original one      headTable insertAfter  originalTable        bodyTable insertAfter  headTable        footTable insertAfter  bodyTable        bodyTable wrap  scrollableDiv        originalTable remove

User · Answer

lt html gt   lt head gt       lt script src    cdn jsdelivr net npm jquery 3 2 1 dist jquery min js  gt  lt  script gt       lt script gt          function stickyTableHead  tableID                var  tmain     tableID               var  tScroll    tmain children  thead                    clone                    wrapAll   lt table id  tScroll    gt                     parent                    addClass   tableID  attr  class                     css  position    fixed                    css  top    0                    css  display    none                    prependTo   tMain                 var pos    tmain offset   top    tmain find   gt thead   height                    document  scroll function                      var dataScroll    tScroll data  scroll                    dataScroll   dataScroll    false                  if    this  scrollTop    gt   pos                        if   dataScroll                             tScroll                              data  scroll   true                               show                                find  th   each function                                        this  width  tmain find   gt thead gt tr gt th   eq   this  index    width                                                                             else                       if  dataScroll                             tScroll                              data  scroll   false                               hide                                                                                                          document  ready function                  stickyTableHead   tMain                     lt  script gt   lt  head gt    lt body gt      gfgfdgsfgfdgfds lt br  gt      gfgfdgsfgfdgfds lt br  gt      gfgfdgsfgfdgfds lt br  gt      gfgfdgsfgfdgfds lt br  gt      gfgfdgsfgfdgfds lt br  gt      gfgfdgsfgfdgfds lt br  gt        lt table id  tMain   gt           lt thead gt           lt tr gt               lt th gt 1 lt  th gt   lt th gt 2 lt  th gt  lt th gt 3 lt  th gt   lt th gt 4 lt  th gt  lt th gt 5 lt  th gt   lt th gt 6 lt  th gt  lt th gt 7 lt  th gt   lt th gt 8 lt  th gt            lt  tr gt           lt  thead gt           lt tbody gt               lt tr gt  lt td gt 11111111111111111111111111111111111111111111111111111111 lt  td gt  lt td gt 2 lt  td gt  lt td gt 3 lt  td gt  lt td gt 4 lt  td gt  lt td gt 5555555 lt  td gt  lt td gt 66666666666 lt  td gt  lt td gt 77777777777 lt  td gt  lt td gt 8888888888888888 lt  td gt  lt  tr gt               lt tr gt  lt td gt 1 lt  td gt  lt td gt 2 lt  td gt  lt td gt 3 lt  td gt  lt td gt 4 lt  td gt  lt td gt 5555555 lt  td gt  lt td gt 66666666666 lt  td gt  lt td gt 77777777777 lt  td gt  lt td gt 8888888888888888 lt  td gt  lt  tr gt               lt tr gt  lt td gt 1 lt  td gt  lt td gt 2 lt  td gt  lt td gt 3 lt  td gt  lt td gt 4 lt  td gt  lt td gt 5555555 lt  td gt  lt td gt 66666666666 lt  td gt  lt td gt 77777777777 lt  td gt  lt td gt 8888888888888888 lt  td gt  lt  tr gt               lt tr gt  lt td gt 1 lt  td gt  lt td gt 2 lt  td gt  lt td gt 3 lt  td gt  lt td gt 4 lt  td gt  lt td gt 5555555 lt  td gt  lt td gt 66666666666 lt  td gt  lt td gt 77777777777 lt  td gt  lt td gt 8888888888888888 lt  td gt  lt  tr gt               lt tr gt  lt td gt 1 lt  td gt  lt td gt 2 lt  td gt  lt td gt 3 lt  td gt  lt td gt 4 lt  td gt  lt td gt 5555555 lt  td gt  lt td gt 66666666666 lt  td gt  lt td gt 77777777777 lt  td gt  lt td gt 8888888888888888 lt  td gt  lt  tr gt               lt tr gt  lt td gt 1 lt  td gt  lt td gt 2 lt  td gt  lt td gt 3 lt  td gt  lt td gt 4 lt  td gt  lt td gt 5555555 lt  td gt  lt td gt 66666666666 lt  td gt  lt td gt 77777777777 lt  td gt  lt td gt 8888888888888888 lt  td gt  lt  tr gt               lt tr gt  lt td gt 1 lt  td gt  lt td gt 2 lt  td gt  lt td gt 3 lt  td gt  lt td gt 4 lt  td gt  lt td gt 5555555 lt  td gt  lt td gt 66666666666 lt  td gt  lt td gt 77777777777 lt  td gt  lt td gt 8888888888888888 lt  td gt  lt  tr gt               lt tr gt  lt td gt 1 lt  td gt  lt td gt 2 lt  td gt  lt td gt 3 lt  td gt  lt td gt 4 lt  td gt  lt td gt 5555555 lt  td gt  lt td gt 66666666666 lt  td gt  lt td gt 77777777777 lt  td gt  lt td gt 8888888888888888 lt  td gt  lt  tr gt               lt tr gt  lt td gt 1 lt  td gt  lt td gt 2 lt  td gt  lt td gt 3 lt  td gt  lt td gt 4 lt  td gt  lt td gt 5555555 lt  td gt  lt td gt 66666666666 lt  td gt  lt td gt 77777777777 lt  td gt  lt td gt 8888888888888888 lt  td gt  lt  tr gt               lt tr gt  lt td gt 1 lt  td gt  lt td gt 2 lt  td gt  lt td gt 3 lt  td gt  lt td gt 4 lt  td gt  lt td gt 5555555 lt  td gt  lt td gt 66666666666 lt  td gt  lt td gt 77777777777 lt  td gt  lt td gt 8888888888888888 lt  td gt  lt  tr gt               lt tr gt  lt td gt 1 lt  td gt  lt td gt 2 lt  td gt  lt td gt 3 lt  td gt  lt td gt 4 lt  td gt  lt td gt 5555555 lt  td gt  lt td gt 66666666666 lt  td gt  lt td gt 77777777777 lt  td gt  lt td gt 8888888888888888 lt  td gt  lt  tr gt               lt tr gt  lt td gt 1 lt  td gt  lt td gt 2 lt  td gt  lt td gt 3 lt  td gt  lt td gt 4 lt  td gt  lt td gt 5555555 lt  td gt  lt td gt 66666666666 lt  td gt  lt td gt 77777777777 lt  td gt  lt td gt 8888888888888888 lt  td gt  lt  tr gt               lt tr gt  lt td gt 1 lt  td gt  lt td gt 2 lt  td gt  lt td gt 3 lt  td gt  lt td gt 4 lt  td gt  lt td gt 5555555 lt  td gt  lt td gt 66666666666 lt  td gt  lt td gt 77777777777 lt  td gt  lt td gt 8888888888888888 lt  td gt  lt  tr gt               lt tr gt  lt td gt 1 lt  td gt  lt td gt 2 lt  td gt  lt td gt 3 lt  td gt  lt td gt 4 lt  td gt  lt td gt 5555555 lt  td gt  lt td gt 66666666666 lt  td gt  lt td gt 77777777777 lt  td gt  lt td gt 8888888888888888 lt  td gt  lt  tr gt               lt tr gt  lt td gt 1 lt  td gt  lt td gt 2 lt  td gt  lt td gt 3 lt  td gt  lt td gt 4 lt  td gt  lt td gt 5555555 lt  td gt  lt td gt 66666666666 lt  td gt  lt td gt 77777777777 lt  td gt  lt td gt 8888888888888888 lt  td gt  lt  tr gt               lt tr gt  lt td gt 1 lt  td gt  lt td gt 2 lt  td gt  lt td gt 3 lt  td gt  lt td gt 4 lt  td gt  lt td gt 5555555 lt  td gt  lt td gt 66666666666 lt  td gt  lt td gt 77777777777 lt  td gt  lt td gt 8888888888888888 lt  td gt  lt  tr gt               lt tr gt  lt td gt 1 lt  td gt  lt td gt 2 lt  td gt  lt td gt 3 lt  td gt  lt td gt 4 lt  td gt  lt td gt 5555555 lt  td gt  lt td gt 66666666666 lt  td gt  lt td gt 77777777777 lt  td gt  lt td gt 8888888888888888 lt  td gt  lt  tr gt               lt tr gt  lt td gt 1 lt  td gt  lt td gt 2 lt  td gt  lt td gt 3 lt  td gt  lt td gt 4 lt  td gt  lt td gt 5555555 lt  td gt  lt td gt 66666666666 lt  td gt  lt td gt 77777777777 lt  td gt  lt td gt 8888888888888888 lt  td gt  lt  tr gt               lt tr gt  lt td gt 1 lt  td gt  lt td gt 2 lt  td gt  lt td gt 3 lt  td gt  lt td gt 4 lt  td gt  lt td gt 5555555 lt  td gt  lt td gt 66666666666 lt  td gt  lt td gt 77777777777 lt  td gt  lt td gt 8888888888888888 lt  td gt  lt  tr gt               lt tr gt  lt td gt 1 lt  td gt  lt td gt 2 lt  td gt  lt td gt 3 lt  td gt  lt td gt 4 lt  td gt  lt td gt 5555555 lt  td gt  lt td gt 66666666666 lt  td gt  lt td gt 77777777777 lt  td gt  lt td gt 8888888888888888 lt  td gt  lt  tr gt               lt tr gt  lt td gt 1 lt  td gt  lt td gt 2 lt  td gt  lt td gt 3 lt  td gt  lt td gt 4 lt  td gt  lt td gt 5555555 lt  td gt  lt td gt 66666666666 lt  td gt  lt td gt 77777777777 lt  td gt  lt td gt 8888888888888888 lt  td gt  lt  tr gt               lt tr gt  lt td gt 1 lt  td gt  lt td gt 2 lt  td gt  lt td gt 3 lt  td gt  lt td gt 4 lt  td gt  lt td gt 5555555 lt  td gt  lt td gt 66666666666 lt  td gt  lt td gt 77777777777 lt  td gt  lt td gt 8888888888888888 lt  td gt  lt  tr gt               lt tr gt  lt td gt 1 lt  td gt  lt td gt 2 lt  td gt  lt td gt 3 lt  td gt  lt td gt 4 lt  td gt  lt td gt 5555555 lt  td gt  lt td gt 66666666666 lt  td gt  lt td gt 77777777777 lt  td gt  lt td gt 8888888888888888 lt  td gt  lt  tr gt               lt tr gt  lt td gt 1 lt  td gt  lt td gt 2 lt  td gt  lt td gt 3 lt  td gt  lt td gt 4 lt  td gt  lt td gt 5555555 lt  td gt  lt td gt 66666666666 lt  td gt  lt td gt 77777777777 lt  td gt  lt td gt 8888888888888888 lt  td gt  lt  tr gt               lt tr gt  lt td gt 1 lt  td gt  lt td gt 2 lt  td gt  lt td gt 3 lt  td gt  lt td gt 4 lt  td gt  lt td gt 5555555 lt  td gt  lt td gt 66666666666 lt  td gt  lt td gt 77777777777 lt  td gt  lt td gt 8888888888888888 lt  td gt  lt  tr gt               lt tr gt  lt td gt 1 lt  td gt  lt td gt 2 lt  td gt  lt td gt 3 lt  td gt  lt td gt 4 lt  td gt  lt td gt 5555555 lt  td gt  lt td gt 66666666666 lt  td gt  lt td gt 77777777777 lt  td gt  lt td gt 8888888888888888 lt  td gt  lt  tr gt               lt tr gt  lt td gt 1 lt  td gt  lt td gt 2 lt  td gt  lt td gt 3 lt  td gt  lt td gt 4 lt  td gt  lt td gt 5555555 lt  td gt  lt td gt 66666666666 lt  td gt  lt td gt 77777777777 lt  td gt  lt td gt 8888888888888888 lt  td gt  lt  tr gt               lt tr gt  lt td gt 1 lt  td gt  lt td gt 2 lt  td gt  lt td gt 3 lt  td gt  lt td gt 4 lt  td gt  lt td gt 5555555 lt  td gt  lt td gt 66666666666 lt  td gt  lt td gt 77777777777 lt  td gt  lt td gt 8888888888888888 lt  td gt  lt  tr gt               lt tr gt  lt td gt 1 lt  td gt  lt td gt 2 lt  td gt  lt td gt 3 lt  td gt  lt td gt 4 lt  td gt  lt td gt 5555555 lt  td gt  lt td gt 66666666666 lt  td gt  lt td gt 77777777777 lt  td gt  lt td gt 8888888888888888 lt  td gt  lt  tr gt               lt tr gt  lt td gt 1 lt  td gt  lt td gt 2 lt  td gt  lt td gt 3 lt  td gt  lt td gt 4 lt  td gt  lt td gt 5555555 lt  td gt  lt td gt 66666666666 lt  td gt  lt td gt 77777777777 lt  td gt  lt td gt 8888888888888888 lt  td gt  lt  tr gt               lt tr gt  lt td gt 1 lt  td gt  lt td gt 2 lt  td gt  lt td gt 3 lt  td gt  lt td gt 4 lt  td gt  lt td gt 5555555 lt  td gt  lt td gt 66666666666 lt  td gt  lt td gt 77777777777 lt  td gt  lt td gt 8888888888888888 lt  td gt  lt  tr gt               lt tr gt  lt td gt 1 lt  td gt  lt td gt 2 lt  td gt  lt td gt 3 lt  td gt  lt td gt 4 lt  td gt  lt td gt 5555555 lt  td gt  lt td gt 66666666666 lt  td gt  lt td gt 77777777777 lt  td gt  lt td gt 8888888888888888 lt  td gt  lt  tr gt               lt tr gt  lt td gt 1 lt  td gt  lt td gt 2 lt  td gt  lt td gt 3 lt  td gt  lt td gt 4 lt  td gt  lt td gt 5555555 lt  td gt  lt td gt 66666666666 lt  td gt  lt td gt 77777777777 lt  td gt  lt td gt 8888888888888888 lt  td gt  lt  tr gt               lt tr gt  lt td gt 1 lt  td gt  lt td gt 2 lt  td gt  lt td gt 3 lt  td gt  lt td gt 4 lt  td gt  lt td gt 5555555 lt  td gt  lt td gt 66666666666 lt  td gt  lt td gt 77777777777 lt  td gt  lt td gt 8888888888888888 lt  td gt  lt  tr gt               lt tr gt  lt td gt 1 lt  td gt  lt td gt 2 lt  td gt  lt td gt 3 lt  td gt  lt td gt 4 lt  td gt  lt td gt 5555555 lt  td gt  lt td gt 66666666666 lt  td gt  lt td gt 77777777777 lt  td gt  lt td gt 8888888888888888 lt  td gt  lt  tr gt               lt tr gt  lt td gt 1 lt  td gt  lt td gt 2 lt  td gt  lt td gt 3 lt  td gt  lt td gt 4 lt  td gt  lt td gt 5555555 lt  td gt  lt td gt 66666666666 lt  td gt  lt td gt 77777777777 lt  td gt  lt td gt 8888888888888888 lt  td gt  lt  tr gt           lt  tbody gt       lt  table gt   lt  body gt   lt  html gt

User · Answer

Most of the solutions posted here require jQuery  If you are looking for a framework independent solution try Grid  http   www matts411 com post grid   It s hosted on Github here  https   github com mmurph211 Grid  Not only does it support fixed headers  it also supports fixed left columns and footers  among other things

User · Answer

Additional to  Daniel Waltrip answer  Table need to enclose with div position  relative in order to work with position sticky   So I would like to post my sample code here   CSS     Set table width height as you want    div freeze-header     position  relative    max-height  150px    max-width  400px    overflow auto        Use position sticky to freeze header on top   div freeze-header  gt  table  gt  thead  gt  tr  gt  th     position  sticky    top  0    background-color yellow        below is just table style decoration    div freeze-header  gt  table     border-collapse  collapse     div freeze-header  gt  table td     border  1px solid black      HTML   lt html gt   lt body gt     lt div gt     other contents        lt  div gt     lt div gt     other contents        lt  div gt     lt div gt     other contents        lt  div gt      lt div class  freeze-header  gt       lt table gt          lt thead gt            lt tr gt              lt th gt  header 1  lt  th gt              lt th gt  header 2  lt  th gt              lt th gt  header 3  lt  th gt              lt th gt  header 4  lt  th gt              lt th gt  header 5  lt  th gt              lt th gt  header 6  lt  th gt              lt th gt  header 7  lt  th gt              lt th gt  header 8  lt  th gt              lt th gt  header 9  lt  th gt              lt th gt  header 10  lt  th gt              lt th gt  header 11  lt  th gt              lt th gt  header 12  lt  th gt              lt th gt  header 13  lt  th gt              lt th gt  header 14  lt  th gt              lt th gt  header 15  lt  th gt             lt  tr gt          lt  thead gt          lt tbody gt            lt tr gt              lt td gt  data 1  lt  td gt              lt td gt  data 2  lt  td gt              lt td gt  data 3  lt  td gt              lt td gt  data 4  lt  td gt              lt td gt  data 5  lt  td gt              lt td gt  data 6  lt  td gt              lt td gt  data 7  lt  td gt              lt td gt  data 8  lt  td gt              lt td gt  data 9  lt  td gt              lt td gt  data 10  lt  td gt              lt td gt  data 11  lt  td gt              lt td gt  data 12  lt  td gt              lt td gt  data 13  lt  td gt              lt td gt  data 14  lt  td gt              lt td gt  data 15  lt  td gt             lt  tr gt                     lt tr gt              lt td gt  data 1  lt  td gt              lt td gt  data 2  lt  td gt              lt td gt  data 3  lt  td gt              lt td gt  data 4  lt  td gt              lt td gt  data 5  lt  td gt              lt td gt  data 6  lt  td gt              lt td gt  data 7  lt  td gt              lt td gt  data 8  lt  td gt              lt td gt  data 9  lt  td gt              lt td gt  data 10  lt  td gt              lt td gt  data 11  lt  td gt              lt td gt  data 12  lt  td gt              lt td gt  data 13  lt  td gt              lt td gt  data 14  lt  td gt              lt td gt  data 15  lt  td gt             lt  tr gt                     lt tr gt              lt td gt  data 1  lt  td gt              lt td gt  data 2  lt  td gt              lt td gt  data 3  lt  td gt              lt td gt  data 4  lt  td gt              lt td gt  data 5  lt  td gt              lt td gt  data 6  lt  td gt              lt td gt  data 7  lt  td gt              lt td gt  data 8  lt  td gt              lt td gt  data 9  lt  td gt              lt td gt  data 10  lt  td gt              lt td gt  data 11  lt  td gt              lt td gt  data 12  lt  td gt              lt td gt  data 13  lt  td gt              lt td gt  data 14  lt  td gt              lt td gt  data 15  lt  td gt             lt  tr gt                     lt tr gt              lt td gt  data 1  lt  td gt              lt td gt  data 2  lt  td gt              lt td gt  data 3  lt  td gt              lt td gt  data 4  lt  td gt              lt td gt  data 5  lt  td gt              lt td gt  data 6  lt  td gt              lt td gt  data 7  lt  td gt              lt td gt  data 8  lt  td gt              lt td gt  data 9  lt  td gt              lt td gt  data 10  lt  td gt              lt td gt  data 11  lt  td gt              lt td gt  data 12  lt  td gt              lt td gt  data 13  lt  td gt              lt td gt  data 14  lt  td gt              lt td gt  data 15  lt  td gt             lt  tr gt                     lt tr gt              lt td gt  data 1  lt  td gt              lt td gt  data 2  lt  td gt              lt td gt  data 3  lt  td gt              lt td gt  data 4  lt  td gt              lt td gt  data 5  lt  td gt              lt td gt  data 6  lt  td gt              lt td gt  data 7  lt  td gt              lt td gt  data 8  lt  td gt              lt td gt  data 9  lt  td gt              lt td gt  data 10  lt  td gt              lt td gt  data 11  lt  td gt              lt td gt  data 12  lt  td gt              lt td gt  data 13  lt  td gt              lt td gt  data 14  lt  td gt              lt td gt  data 15  lt  td gt             lt  tr gt                     lt tr gt              lt td gt  data 1  lt  td gt              lt td gt  data 2  lt  td gt              lt td gt  data 3  lt  td gt              lt td gt  data 4  lt  td gt              lt td gt  data 5  lt  td gt              lt td gt  data 6  lt  td gt              lt td gt  data 7  lt  td gt              lt td gt  data 8  lt  td gt              lt td gt  data 9  lt  td gt              lt td gt  data 10  lt  td gt              lt td gt  data 11  lt  td gt              lt td gt  data 12  lt  td gt              lt td gt  data 13  lt  td gt              lt td gt  data 14  lt  td gt              lt td gt  data 15  lt  td gt             lt  tr gt                     lt tr gt              lt td gt  data 1  lt  td gt              lt td gt  data 2  lt  td gt              lt td gt  data 3  lt  td gt              lt td gt  data 4  lt  td gt              lt td gt  data 5  lt  td gt              lt td gt  data 6  lt  td gt              lt td gt  data 7  lt  td gt              lt td gt  data 8  lt  td gt              lt td gt  data 9  lt  td gt              lt td gt  data 10  lt  td gt              lt td gt  data 11  lt  td gt              lt td gt  data 12  lt  td gt              lt td gt  data 13  lt  td gt              lt td gt  data 14  lt  td gt              lt td gt  data 15  lt  td gt             lt  tr gt                     lt tr gt              lt td gt  data 1  lt  td gt              lt td gt  data 2  lt  td gt              lt td gt  data 3  lt  td gt              lt td gt  data 4  lt  td gt              lt td gt  data 5  lt  td gt              lt td gt  data 6  lt  td gt              lt td gt  data 7  lt  td gt              lt td gt  data 8  lt  td gt              lt td gt  data 9  lt  td gt              lt td gt  data 10  lt  td gt              lt td gt  data 11  lt  td gt              lt td gt  data 12  lt  td gt              lt td gt  data 13  lt  td gt              lt td gt  data 14  lt  td gt              lt td gt  data 15  lt  td gt             lt  tr gt                   lt  tbody gt       lt  table gt     lt  div gt   lt  body gt   lt  html gt    Demo

[javascript] HTML table with fixed headers?

Examples related to javascript

Examples related to css

Examples related to html-table