Fixed header table with horizontal scrollbar and vertical scrollbar on

Question

I have been trying to figure out this problem i have with html css sticky header   scrollbars  We are creating a program that requires scrollbars to show up once the containersize reaches a certain point depending on resolution of the user     I am forcing a min-width on the second column in the table  so the table stops decreasing at a certain point and forces the container to stay at a certain width  The overflow on the container shows the horizontal scrollbar  Everything works fine  Once i add a second scrollbar for the vertical scrolling  things are getting messed up  Does someone have a solution for this problem  I want to have a vertical scrollbar on the  table-body  but the scrollbar must be visible on the outercontainer   Is there a good html css solution for fixed header tables  I have been searching for a week  but can only find jQuery plugins for this kind of behaviour   This is my current HTML    lt  DOCTYPE html gt   lt html gt   lt head gt       lt title gt fixed header prototyping lt  title gt       lt link rel  stylesheet  href  css style css  gt   lt  head gt    lt body gt   lt div class  outer-container  gt   lt  -- absolute positioned container -- gt   lt div class  inner-container  gt        lt div class  table-header  gt           lt table id  headertable  width  100   cellpadding  0  cellspacing  0  gt               lt thead gt                   lt tr gt                       lt th class  header-cell col1  gt One lt  th gt                       lt th class  header-cell col2  gt Two lt  th gt                       lt th class  header-cell col3  gt Three lt  th gt                       lt th class  header-cell col4  gt Four lt  th gt                       lt th class  header-cell col5  gt Five lt  th gt                   lt  tr gt               lt  thead gt           lt  table gt       lt  div gt        lt div class  table-body  gt           lt table id  bodytable  width  100   cellpadding  0  cellspacing  0  gt               lt tbody gt                   lt tr gt                       lt td class  body-cell col1  gt body row1 lt  td gt                       lt td class  body-cell col2  gt body row2 lt  td gt                       lt td class  body-cell col3  gt body row2 lt  td gt                       lt td class  body-cell col4  gt body row2 lt  td gt                       lt td class  body-cell col5  gt body row2 en nog meer lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  body-cell col1  gt body row1 lt  td gt                       lt td class  body-cell col2  gt body row2 lt  td gt                       lt td class  body-cell col3  gt body row2 lt  td gt                       lt td class  body-cell col4  gt body row2 lt  td gt                       lt td class  body-cell col5  gt body row2 en nog meer lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  body-cell col1  gt body row1 lt  td gt                       lt td class  body-cell col2  gt body row2 lt  td gt                       lt td class  body-cell col3  gt body row2 lt  td gt                       lt td class  body-cell col4  gt body row2 lt  td gt                       lt td class  body-cell col5  gt body row2 en nog meer lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  body-cell col1  gt body row1 lt  td gt                       lt td class  body-cell col2  gt body row2 lt  td gt                       lt td class  body-cell col3  gt body row2 lt  td gt                       lt td class  body-cell col4  gt body row2 lt  td gt                       lt td class  body-cell col5  gt body row2 en nog meer lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  body-cell col1  gt body row1 lt  td gt                       lt td class  body-cell col2  gt body row2 lt  td gt                       lt td class  body-cell col3  gt body row2 lt  td gt                       lt td class  body-cell col4  gt body row2 lt  td gt                       lt td class  body-cell col5  gt body row2 en nog meer lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  body-cell col1  gt body row1 lt  td gt                       lt td class  body-cell col2  gt body row2 lt  td gt                       lt td class  body-cell col3  gt body row2 lt  td gt                       lt td class  body-cell col4  gt body row2 lt  td gt                       lt td class  body-cell col5  gt body row2 en nog meer lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  body-cell col1  gt body row1 lt  td gt                       lt td class  body-cell col2  gt body row2 lt  td gt                       lt td class  body-cell col3  gt body row2 lt  td gt                       lt td class  body-cell col4  gt body row2 lt  td gt                       lt td class  body-cell col5  gt body row2 en nog meer lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  body-cell col1  gt body row1 lt  td gt                       lt td class  body-cell col2  gt body row2 lt  td gt                       lt td class  body-cell col3  gt body row2 lt  td gt                       lt td class  body-cell col4  gt body row2 lt  td gt                       lt td class  body-cell col5  gt body row2 en nog meer lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  body-cell col1  gt body row1 lt  td gt                       lt td class  body-cell col2  gt body row2 lt  td gt                       lt td class  body-cell col3  gt body row2 lt  td gt                       lt td class  body-cell col4  gt body row2 lt  td gt                       lt td class  body-cell col5  gt body row2 en nog meer lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  body-cell col1  gt body row1 lt  td gt                       lt td class  body-cell col2  gt body row2 lt  td gt                       lt td class  body-cell col3  gt body row2 lt  td gt                       lt td class  body-cell col4  gt body row2 lt  td gt                       lt td class  body-cell col5  gt body row2 en nog meer lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  body-cell col1  gt body row1 lt  td gt                       lt td class  body-cell col2  gt body row2 lt  td gt                       lt td class  body-cell col3  gt body row2 lt  td gt                       lt td class  body-cell col4  gt body row2 lt  td gt                       lt td class  body-cell col5  gt body row2 en nog meer lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  body-cell col1  gt body row1 lt  td gt                       lt td class  body-cell col2  gt body row2 lt  td gt                       lt td class  body-cell col3  gt body row2 lt  td gt                       lt td class  body-cell col4  gt body row2 lt  td gt                       lt td class  body-cell col5  gt body row2 en nog meer lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  body-cell col1  gt body row1 lt  td gt                       lt td class  body-cell col2  gt body row2 lt  td gt                       lt td class  body-cell col3  gt body row2 lt  td gt                       lt td class  body-cell col4  gt body row2 lt  td gt                       lt td class  body-cell col5  gt body row2 en nog meer lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  body-cell col1  gt body row1 lt  td gt                       lt td class  body-cell col2  gt body row2 lt  td gt                       lt td class  body-cell col3  gt body row2 lt  td gt                       lt td class  body-cell col4  gt body row2 lt  td gt                       lt td class  body-cell col5  gt body row2 en nog meer lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  body-cell col1  gt body row1 lt  td gt                       lt td class  body-cell col2  gt body row2 lt  td gt                       lt td class  body-cell col3  gt body row2 lt  td gt                       lt td class  body-cell col4  gt body row2 lt  td gt                       lt td class  body-cell col5  gt body row2 en nog meer lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  body-cell col1  gt body row1 lt  td gt                       lt td class  body-cell col2  gt body row2 lt  td gt                       lt td class  body-cell col3  gt body row2 lt  td gt                       lt td class  body-cell col4  gt body row2 lt  td gt                       lt td class  body-cell col5  gt body row2 en nog meer lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  body-cell col1  gt body row1 lt  td gt                       lt td class  body-cell col2  gt body row2 lt  td gt                       lt td class  body-cell col3  gt body row2 lt  td gt                       lt td class  body-cell col4  gt body row2 lt  td gt                       lt td class  body-cell col5  gt body row2 en nog meer lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  body-cell col1  gt body row1 lt  td gt                       lt td class  body-cell col2  gt body row2 lt  td gt                       lt td class  body-cell col3  gt body row2 lt  td gt                       lt td class  body-cell col4  gt body row2 lt  td gt                       lt td class  body-cell col5  gt body row2 en nog meer lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  body-cell col1  gt body row1 lt  td gt                       lt td class  body-cell col2  gt body row2 lt  td gt                       lt td class  body-cell col3  gt body row2 lt  td gt                       lt td class  body-cell col4  gt body row2 lt  td gt                       lt td class  body-cell col5  gt body row2 en nog meer lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  body-cell col1  gt body row1 lt  td gt                       lt td class  body-cell col2  gt body row2 lt  td gt                       lt td class  body-cell col3  gt body row2 lt  td gt                       lt td class  body-cell col4  gt body row2 lt  td gt                       lt td class  body-cell col5  gt body row2 en nog meer lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  body-cell col1  gt body row1 lt  td gt                       lt td class  body-cell col2  gt body row2 lt  td gt                       lt td class  body-cell col3  gt body row2 lt  td gt                       lt td class  body-cell col4  gt body row2 lt  td gt                       lt td class  body-cell col5  gt body row2 en nog meer lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  body-cell col1  gt body row1 lt  td gt                       lt td class  body-cell col2  gt body row2 lt  td gt                       lt td class  body-cell col3  gt body row2 lt  td gt                       lt td class  body-cell col4  gt body row2 lt  td gt                       lt td class  body-cell col5  gt body row2 en nog meer lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  body-cell col1  gt body row1 lt  td gt                       lt td class  body-cell col2  gt body row2 lt  td gt                       lt td class  body-cell col3  gt body row2 lt  td gt                       lt td class  body-cell col4  gt body row2 lt  td gt                       lt td class  body-cell col5  gt body row2 en nog meer lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  body-cell col1  gt body row1 lt  td gt                       lt td class  body-cell col2  gt body row2 lt  td gt                       lt td class  body-cell col3  gt body row2 lt  td gt                       lt td class  body-cell col4  gt body row2 lt  td gt                       lt td class  body-cell col5  gt body row2 en nog meer lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  body-cell col1  gt body row1 lt  td gt                       lt td class  body-cell col2  gt body row2 lt  td gt                       lt td class  body-cell col3  gt body row2 lt  td gt                       lt td class  body-cell col4  gt body row2 lt  td gt                       lt td class  body-cell col5  gt body row2 en nog meer lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  body-cell col1  gt body row1 lt  td gt                       lt td class  body-cell col2  gt body row2 lt  td gt                       lt td class  body-cell col3  gt body row2 lt  td gt                       lt td class  body-cell col4  gt body row2 lt  td gt                       lt td class  body-cell col5  gt body row2 en nog meer lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  body-cell col1  gt body row1 lt  td gt                       lt td class  body-cell col2  gt body row2 lt  td gt                       lt td class  body-cell col3  gt body row2 lt  td gt                       lt td class  body-cell col4  gt body row2 lt  td gt                       lt td class  body-cell col5  gt body row2 en nog meer lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  body-cell col1  gt body row1 lt  td gt                       lt td class  body-cell col2  gt body row2 lt  td gt                       lt td class  body-cell col3  gt body row2 lt  td gt                       lt td class  body-cell col4  gt body row2 lt  td gt                       lt td class  body-cell col5  gt body row2 en nog meer lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  body-cell col1  gt body row1 lt  td gt                       lt td class  body-cell col2  gt body row2 lt  td gt                       lt td class  body-cell col3  gt body row2 lt  td gt                       lt td class  body-cell col4  gt body row2 lt  td gt                       lt td class  body-cell col5  gt body row2 en nog meer lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  body-cell col1  gt body row1 lt  td gt                       lt td class  body-cell col2  gt body row2 lt  td gt                       lt td class  body-cell col3  gt body row2 lt  td gt                       lt td class  body-cell col4  gt body row2 lt  td gt                       lt td class  body-cell col5  gt body row2 en nog meer lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  body-cell col1  gt body row1 lt  td gt                       lt td class  body-cell col2  gt body row2 lt  td gt                       lt td class  body-cell col3  gt body row2 lt  td gt                       lt td class  body-cell col4  gt body row2 lt  td gt                       lt td class  body-cell col5  gt body row2 en nog meer lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  body-cell col1  gt body row1 lt  td gt                       lt td class  body-cell col2  gt body row2 lt  td gt                       lt td class  body-cell col3  gt body row2 lt  td gt                       lt td class  body-cell col4  gt body row2 lt  td gt                       lt td class  body-cell col5  gt body row2 en nog meer lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  body-cell col1  gt body row1 lt  td gt                       lt td class  body-cell col2  gt body row2 lt  td gt                       lt td class  body-cell col3  gt body row2 lt  td gt                       lt td class  body-cell col4  gt body row2 lt  td gt                       lt td class  body-cell col5  gt body row2 en nog meer lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  body-cell col1  gt body row1 lt  td gt                       lt td class  body-cell col2  gt body row2 lt  td gt                       lt td class  body-cell col3  gt body row2 lt  td gt                       lt td class  body-cell col4  gt body row2 lt  td gt                       lt td class  body-cell col5  gt body row2 en nog meer lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  body-cell col1  gt body row1 lt  td gt                       lt td class  body-cell col2  gt body row2 lt  td gt                       lt td class  body-cell col3  gt body row2 lt  td gt                       lt td class  body-cell col4  gt body row2 lt  td gt                       lt td class  body-cell col5  gt body row2 en nog meer lt  td gt                   lt  tr gt               lt  tbody gt           lt  table gt       lt  div gt   lt  div gt   lt  div gt      lt  body gt   lt  html gt    And my CSS looks like this   body       margin 0      padding 0      height  100       width  100     table       border-collapse  collapse     make simple 1px lines borders if border defined      tr       width  100       outer-container       background-color   ccc      position  absolute      top 0      left  0      right  300px      bottom 40px      overflow  hidden      inner-container       width  100       height  100       position  relative      overflow-x  scroll      overflow-y hidden     table-header       float left      width  100      table-body       float left      height  100       width  inherit      overflow-y  scroll     header-cell       background-color  yellow      text-align  left      height  40px     body-cell       background-color  blue      text-align  left     col1   col3   col4   col5       width 120px      min-width  120px     col2       min-width  300px      JSFiddle example - http   jsfiddle net W8URM   Thanks in advance guys

User · Answer

There s a jquery plugin for this  jquery floatThead

User · Answer

Here s a solution which again is not a CSS only solution  It is similar to avrahamcool s solution in that it uses a few lines of jQuery  but instead of changing heights and moving the header along  all it does is changing the width of tbody based on how far its parent table is scrolled along to the right   An added bonus with this solution is that it works with a semantically valid HTML table   It works great on all recent browser versions  IE10  Chrome  FF  and that s it  the scrolling functionality breaks on older versions    But then the fact that you are using a semantically valid HTML table will save the day and ensure the table is still displayed properly  it s only the scrolling functionality that won t work on older browsers   Here s a jsFiddle for demonstration purposes   CSS  table       width  300px      overflow-x  scroll      display  block    thead  tbody       display  block    tbody       overflow-y  scroll      overflow-x  hidden      height  140px    td  th       min-width  100px      JS     table   on  scroll   function             table  gt      width    table   width        table   scrollLeft           I needed a version which degrades nicely in IE9  no scrolling  just a normal table   Posting the fiddle here as it is an improved version  All you need to do is set a height on the tr   Additional CSS to make this solution degrade nicely in IE9  tr       height  25px     This could be any value  it just needs to be set          Here s a jsFiddle demonstrating the nicely degrading in IE9 version of this solution   Edit  Updated fiddle links to link to a version of the fiddle which contains fixes for issues mentioned in the comments  Just adding a snippet with the latest and greatest version while I m at it    x000D   x000D     table   on  scroll   function     x000D       table  gt      width    table   width        table   scrollLeft     x000D      x000D  html   x000D    font-family  verdana  x000D    font-size  10pt  x000D    line-height  25px  x000D    x000D   x000D  table   x000D    border-collapse  collapse  x000D    width  300px  x000D    overflow-x  scroll  x000D    display  block  x000D    x000D   x000D  thead   x000D    background-color   EFEFEF  x000D    x000D   x000D  thead  x000D  tbody   x000D    display  block  x000D    x000D   x000D  tbody   x000D    overflow-y  scroll  x000D    overflow-x  hidden  x000D    height  140px  x000D    x000D   x000D  td  x000D  th   x000D    min-width  100px  x000D    height  25px  x000D    border  dashed 1px lightblue  x000D    overflow  hidden  x000D    text-overflow  ellipsis  x000D    max-width  100px  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt table gt  x000D     lt thead gt  x000D       lt tr gt  x000D         lt th gt Column 1 lt  th gt  x000D         lt th gt Column 2 lt  th gt  x000D         lt th gt Column 3 lt  th gt  x000D         lt th gt Column 4 lt  th gt  x000D         lt th gt Column 5 lt  th gt  x000D       lt  tr gt  x000D     lt  thead gt  x000D     lt tbody gt  x000D       lt tr gt  x000D         lt td gt AAAAAAAAAAAAAAAAAAAAAAAAAA lt  td gt  x000D         lt td gt Row 1 lt  td gt  x000D         lt td gt Row 1 lt  td gt  x000D         lt td gt Row 1 lt  td gt  x000D         lt td gt Row 1 lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt Row 2 lt  td gt  x000D         lt td gt Row 2 lt  td gt  x000D         lt td gt Row 2 lt  td gt  x000D         lt td gt Row 2 lt  td gt  x000D         lt td gt Row 2 lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt Row 3 lt  td gt  x000D         lt td gt Row 3 lt  td gt  x000D         lt td gt Row 3 lt  td gt  x000D         lt td gt Row 3 lt  td gt  x000D         lt td gt Row 3 lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt Row 4 lt  td gt  x000D         lt td gt Row 4 lt  td gt  x000D         lt td gt Row 4 lt  td gt  x000D         lt td gt Row 4 lt  td gt  x000D         lt td gt Row 4 lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt Row 5 lt  td gt  x000D         lt td gt Row 5 lt  td gt  x000D         lt td gt Row 5 lt  td gt  x000D         lt td gt Row 5 lt  td gt  x000D         lt td gt Row 5 lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt Row 6 lt  td gt  x000D         lt td gt Row 6 lt  td gt  x000D         lt td gt Row 6 lt  td gt  x000D         lt td gt Row 6 lt  td gt  x000D         lt td gt Row 6 lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt Row 7 lt  td gt  x000D         lt td gt Row 7 lt  td gt  x000D         lt td gt Row 7 lt  td gt  x000D         lt td gt Row 7 lt  td gt  x000D         lt td gt Row 7 lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt Row 8 lt  td gt  x000D         lt td gt Row 8 lt  td gt  x000D         lt td gt Row 8 lt  td gt  x000D         lt td gt Row 8 lt  td gt  x000D         lt td gt Row 8 lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt Row 9 lt  td gt  x000D         lt td gt Row 9 lt  td gt  x000D         lt td gt Row 9 lt  td gt  x000D         lt td gt Row 9 lt  td gt  x000D         lt td gt Row 9 lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt Row 10 lt  td gt  x000D         lt td gt Row 10 lt  td gt  x000D         lt td gt Row 10 lt  td gt  x000D         lt td gt Row 10 lt  td gt  x000D         lt td gt Row 10 lt  td gt  x000D       lt  tr gt  x000D     lt  tbody gt  x000D   lt  table gt  x000D   x000D   x000D

User · Answer

The solution is to use JS to horizontally scroll the top div so that it matches the bottom div   You must be very careful to make sure the top and bottom are exactly the same sizes  for example you might need to make the TD and TH use fixed widths   Here is a fiddle  https   jsfiddle net jdhenckel yzjhk08h 5   The important parts  CSS use   head     overflow-x  hidden    overflow-y  scroll    width  500px     lower     overflow-x  auto    overflow-y  scroll    width  500px    height  400px      Notice overflow-y must be the same on both head and lower   And the Javascript     var head   document querySelector   head     var lower   document querySelector   lower     lower addEventListener  scroll   function  e      console log lower scrollLeft     head scrollLeft   lower scrollLeft

User · Answer

Here is a HTML   CSS only solution  with a little javascript    Apology to answer the question after this long  but the solution given did not suit me and I found a better one  Here is the easiest way to do it with HTML  no jquery    Before that  the solution fiddle to the question  https   jsfiddle net 3vzrunkt    lt div gt       lt div style  overflow hidden  margin-right 16px  id  headerdiv  gt           lt table id  headertable  style  min-width 900px  border 1 gt               lt thead gt                   lt tr gt                       lt th style  width 120px min-width 120px   gt One lt  th gt                       lt th style  width 420px min-width 420px   gt Two lt  th gt                       lt th style  width 120px min-width 120px   gt Three lt  th gt                       lt th style  width 120px min-width 120px   gt Four lt  th gt                       lt th style  width 120px min-width 120px   gt Five lt  th gt                   lt  tr gt               lt  thead gt           lt  table gt       lt  div gt        lt div style  overflow-y scroll max-height 200px             onscroll  document getElementById  headerdiv   scrollLeft   this scrollLeft   gt           lt table id  bodytable  border 1 style  min-width 900px  border 1px solid  gt               lt tbody gt                   lt tr gt                       lt td style  width 120px min-width 120px   gt body row1 lt  td gt                       lt td style  width 420px min-width 420px   gt body row2 lt  td gt                       lt td style  width 120px min-width 120px   gt body row2 lt  td gt                       lt td style  width 120px min-width 120px   gt body row2 lt  td gt                       lt td style  width 120px min-width 120px   gt body row2 en nog meer lt  td gt                   lt  tr gt                                                                                        lt  tbody gt           lt  table gt       lt  div gt   lt  div gt    And to explain the solution    you need and enclosing div no overflow scroll required a header div containing the header table with overflow hidden to ensure that the scrollbar is not displayed  Add margin-right 16px to ensure that the scrollbar is left outside it while synching  another div for containing the table records and overflow-y scroll  Note the padding is required to get the scrollbar move right of the header  And the most important thing the magical js to sync the header and table data    onscroll  document getElementById  headerdiv   scrollLeft   this scrollLeft

User · Answer

working example in jsFiddle  This can be achieved using div  It can be done with table too  But i always prefer div    lt body id  doc-body  style  width  100   height  100   overflow  hidden  position  fixed  onload  InitApp    gt        lt div gt           lt  --If you don t need header background color you don t need this div -- gt           lt div id  div-header-hack  style  height  20px  position  absolute  background-color  gray  gt  lt  div gt            lt div id  div-header  style  position  absolute  top  0px  overflow  hidden  height  20px  background-color  gray  gt                           lt  div gt            lt div id  div-item  style  position  absolute  top  20px  overflow  auto  onscroll  ScrollHeader    gt                           lt  div gt       lt  div gt   lt  body gt    Javascript  please refer jsFiddle for this part  Else this answer becomes very lengthy

User · Answer

This has been driving me crazy for literally weeks   I found a solution that will work for me that includes    Non-fixed column widths - they shrink and grow on window resizing  Table has a horizontal scroll-bar when needed  but not when it isn t  Number of columns is irrelevant - it will size to however many columns you need it to  Not all columns need to be the same width  Header goes all the way to the end of the right scrollbar  No javascript       but there are a couple of caveats    The vertical scrollbar is not visible until you scroll all the way to the right   Given that most people have scroll wheels  this was an acceptable sacrifice  The width of the scrollbar must be known   On my website I set the scrollbar widths  I m not overly concerned with older  incompatible browsers   so I can then calculate div and table widths that adjust based on the scrollbar    Instead of posting my code here  I ll post a link to the jsFiddle   Fixed header table   scroll left right

User · Answer

If this is what you want only HTML and CSS solution  fiddle  Here s the HTML    lt div class  outer-container  gt   lt  -- absolute positioned container -- gt   lt div class  inner-container  gt        lt div class  table-header  gt           lt table id  headertable  width  100   cellpadding  0  cellspacing  0  gt               lt thead gt                   lt tr gt                       lt th class  header-cell col1  gt One lt  th gt                       lt th class  header-cell col2  gt Two lt  th gt                       lt th class  header-cell col3  gt Three lt  th gt                       lt th class  header-cell col4  gt Four lt  th gt                       lt th class  header-cell col5  gt Five lt  th gt                   lt  tr gt               lt  thead gt           lt  table gt       lt  div gt        lt div class  table-body  gt           lt table id  bodytable  width  100   cellpadding  0  cellspacing  0  gt               lt tbody gt                   lt tr gt                       lt td class  body-cell col1  gt body row1 lt  td gt                       lt td class  body-cell col2  gt body row2 lt  td gt                       lt td class  body-cell col3  gt body row2 lt  td gt                       lt td class  body-cell col4  gt body row2 lt  td gt                       lt td class  body-cell col5  gt body row2 en nog meer lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  body-cell col1  gt body row1 lt  td gt                       lt td class  body-cell col2  gt body row2 lt  td gt                       lt td class  body-cell col3  gt body row2 lt  td gt                       lt td class  body-cell col4  gt body row2 lt  td gt                       lt td class  body-cell col5  gt body row2 en nog meer lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  body-cell col1  gt body row1 lt  td gt                       lt td class  body-cell col2  gt body row2 lt  td gt                       lt td class  body-cell col3  gt body row2 lt  td gt                       lt td class  body-cell col4  gt body row2 lt  td gt                       lt td class  body-cell col5  gt body row2 en nog meer lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  body-cell col1  gt body row1 lt  td gt                       lt td class  body-cell col2  gt body row2 lt  td gt                       lt td class  body-cell col3  gt body row2 lt  td gt                       lt td class  body-cell col4  gt body row2 lt  td gt                       lt td class  body-cell col5  gt body row2 en nog meer lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  body-cell col1  gt body row1 lt  td gt                       lt td class  body-cell col2  gt body row2 lt  td gt                       lt td class  body-cell col3  gt body row2 lt  td gt                       lt td class  body-cell col4  gt body row2 lt  td gt                       lt td class  body-cell col5  gt body row2 en nog meer lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  body-cell col1  gt body row1 lt  td gt                       lt td class  body-cell col2  gt body row2 lt  td gt                       lt td class  body-cell col3  gt body row2 lt  td gt                       lt td class  body-cell col4  gt body row2 lt  td gt                       lt td class  body-cell col5  gt body row2 en nog meer lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  body-cell col1  gt body row1 lt  td gt                       lt td class  body-cell col2  gt body row2 lt  td gt                       lt td class  body-cell col3  gt body row2 lt  td gt                       lt td class  body-cell col4  gt body row2 lt  td gt                       lt td class  body-cell col5  gt body row2 en nog meer lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  body-cell col1  gt body row1 lt  td gt                       lt td class  body-cell col2  gt body row2 lt  td gt                       lt td class  body-cell col3  gt body row2 lt  td gt                       lt td class  body-cell col4  gt body row2 lt  td gt                       lt td class  body-cell col5  gt body row2 en nog meer lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  body-cell col1  gt body row1 lt  td gt                       lt td class  body-cell col2  gt body row2 lt  td gt                       lt td class  body-cell col3  gt body row2 lt  td gt                       lt td class  body-cell col4  gt body row2 lt  td gt                       lt td class  body-cell col5  gt body row2 en nog meer lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  body-cell col1  gt body row1 lt  td gt                       lt td class  body-cell col2  gt body row2 lt  td gt                       lt td class  body-cell col3  gt body row2 lt  td gt                       lt td class  body-cell col4  gt body row2 lt  td gt                       lt td class  body-cell col5  gt body row2 en nog meer lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  body-cell col1  gt body row1 lt  td gt                       lt td class  body-cell col2  gt body row2 lt  td gt                       lt td class  body-cell col3  gt body row2 lt  td gt                       lt td class  body-cell col4  gt body row2 lt  td gt                       lt td class  body-cell col5  gt body row2 en nog meer lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  body-cell col1  gt body row1 lt  td gt                       lt td class  body-cell col2  gt body row2 lt  td gt                       lt td class  body-cell col3  gt body row2 lt  td gt                       lt td class  body-cell col4  gt body row2 lt  td gt                       lt td class  body-cell col5  gt body row2 en nog meer lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  body-cell col1  gt body row1 lt  td gt                       lt td class  body-cell col2  gt body row2 lt  td gt                       lt td class  body-cell col3  gt body row2 lt  td gt                       lt td class  body-cell col4  gt body row2 lt  td gt                       lt td class  body-cell col5  gt body row2 en nog meer lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  body-cell col1  gt body row1 lt  td gt                       lt td class  body-cell col2  gt body row2 lt  td gt                       lt td class  body-cell col3  gt body row2 lt  td gt                       lt td class  body-cell col4  gt body row2 lt  td gt                       lt td class  body-cell col5  gt body row2 en nog meer lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  body-cell col1  gt body row1 lt  td gt                       lt td class  body-cell col2  gt body row2 lt  td gt                       lt td class  body-cell col3  gt body row2 lt  td gt                       lt td class  body-cell col4  gt body row2 lt  td gt                       lt td class  body-cell col5  gt body row2 en nog meer lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  body-cell col1  gt body row1 lt  td gt                       lt td class  body-cell col2  gt body row2 lt  td gt                       lt td class  body-cell col3  gt body row2 lt  td gt                       lt td class  body-cell col4  gt body row2 lt  td gt                       lt td class  body-cell col5  gt body row2 en nog meer lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  body-cell col1  gt body row1 lt  td gt                       lt td class  body-cell col2  gt body row2 lt  td gt                       lt td class  body-cell col3  gt body row2 lt  td gt                       lt td class  body-cell col4  gt body row2 lt  td gt                       lt td class  body-cell col5  gt body row2 en nog meer lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  body-cell col1  gt body row1 lt  td gt                       lt td class  body-cell col2  gt body row2 lt  td gt                       lt td class  body-cell col3  gt body row2 lt  td gt                       lt td class  body-cell col4  gt body row2 lt  td gt                       lt td class  body-cell col5  gt body row2 en nog meer lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  body-cell col1  gt body row1 lt  td gt                       lt td class  body-cell col2  gt body row2 lt  td gt                       lt td class  body-cell col3  gt body row2 lt  td gt                       lt td class  body-cell col4  gt body row2 lt  td gt                       lt td class  body-cell col5  gt body row2 en nog meer lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  body-cell col1  gt body row1 lt  td gt                       lt td class  body-cell col2  gt body row2 lt  td gt                       lt td class  body-cell col3  gt body row2 lt  td gt                       lt td class  body-cell col4  gt body row2 lt  td gt                       lt td class  body-cell col5  gt body row2 en nog meer lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  body-cell col1  gt body row1 lt  td gt                       lt td class  body-cell col2  gt body row2 lt  td gt                       lt td class  body-cell col3  gt body row2 lt  td gt                       lt td class  body-cell col4  gt body row2 lt  td gt                       lt td class  body-cell col5  gt body row2 en nog meer lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  body-cell col1  gt body row1 lt  td gt                       lt td class  body-cell col2  gt body row2 lt  td gt                       lt td class  body-cell col3  gt body row2 lt  td gt                       lt td class  body-cell col4  gt body row2 lt  td gt                       lt td class  body-cell col5  gt body row2 en nog meer lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  body-cell col1  gt body row1 lt  td gt                       lt td class  body-cell col2  gt body row2 lt  td gt                       lt td class  body-cell col3  gt body row2 lt  td gt                       lt td class  body-cell col4  gt body row2 lt  td gt                       lt td class  body-cell col5  gt body row2 en nog meer lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  body-cell col1  gt body row1 lt  td gt                       lt td class  body-cell col2  gt body row2 lt  td gt                       lt td class  body-cell col3  gt body row2 lt  td gt                       lt td class  body-cell col4  gt body row2 lt  td gt                       lt td class  body-cell col5  gt body row2 en nog meer lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  body-cell col1  gt body row1 lt  td gt                       lt td class  body-cell col2  gt body row2 lt  td gt                       lt td class  body-cell col3  gt body row2 lt  td gt                       lt td class  body-cell col4  gt body row2 lt  td gt                       lt td class  body-cell col5  gt body row2 en nog meer lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  body-cell col1  gt body row1 lt  td gt                       lt td class  body-cell col2  gt body row2 lt  td gt                       lt td class  body-cell col3  gt body row2 lt  td gt                       lt td class  body-cell col4  gt body row2 lt  td gt                       lt td class  body-cell col5  gt body row2 en nog meer lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  body-cell col1  gt body row1 lt  td gt                       lt td class  body-cell col2  gt body row2 lt  td gt                       lt td class  body-cell col3  gt body row2 lt  td gt                       lt td class  body-cell col4  gt body row2 lt  td gt                       lt td class  body-cell col5  gt body row2 en nog meer lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  body-cell col1  gt body row1 lt  td gt                       lt td class  body-cell col2  gt body row2 lt  td gt                       lt td class  body-cell col3  gt body row2 lt  td gt                       lt td class  body-cell col4  gt body row2 lt  td gt                       lt td class  body-cell col5  gt body row2 en nog meer lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  body-cell col1  gt body row1 lt  td gt                       lt td class  body-cell col2  gt body row2 lt  td gt                       lt td class  body-cell col3  gt body row2 lt  td gt                       lt td class  body-cell col4  gt body row2 lt  td gt                       lt td class  body-cell col5  gt body row2 en nog meer lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  body-cell col1  gt body row1 lt  td gt                       lt td class  body-cell col2  gt body row2 lt  td gt                       lt td class  body-cell col3  gt body row2 lt  td gt                       lt td class  body-cell col4  gt body row2 lt  td gt                       lt td class  body-cell col5  gt body row2 en nog meer lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  body-cell col1  gt body row1 lt  td gt                       lt td class  body-cell col2  gt body row2 lt  td gt                       lt td class  body-cell col3  gt body row2 lt  td gt                       lt td class  body-cell col4  gt body row2 lt  td gt                       lt td class  body-cell col5  gt body row2 en nog meer lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  body-cell col1  gt body row1 lt  td gt                       lt td class  body-cell col2  gt body row2 lt  td gt                       lt td class  body-cell col3  gt body row2 lt  td gt                       lt td class  body-cell col4  gt body row2 lt  td gt                       lt td class  body-cell col5  gt body row2 en nog meer lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  body-cell col1  gt body row1 lt  td gt                       lt td class  body-cell col2  gt body row2 lt  td gt                       lt td class  body-cell col3  gt body row2 lt  td gt                       lt td class  body-cell col4  gt body row2 lt  td gt                       lt td class  body-cell col5  gt body row2 en nog meer lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  body-cell col1  gt body row1 lt  td gt                       lt td class  body-cell col2  gt body row2 lt  td gt                       lt td class  body-cell col3  gt body row2 lt  td gt                       lt td class  body-cell col4  gt body row2 lt  td gt                       lt td class  body-cell col5  gt body row2 en nog meer lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  body-cell col1  gt body row1 lt  td gt                       lt td class  body-cell col2  gt body row2 lt  td gt                       lt td class  body-cell col3  gt body row2 lt  td gt                       lt td class  body-cell col4  gt body row2 lt  td gt                       lt td class  body-cell col5  gt body row2 en nog meer lt  td gt                   lt  tr gt               lt  tbody gt           lt  table gt       lt  div gt   lt  div gt   lt  div gt    And this is the css  body   margin 0  padding 0  height  100   width  100     table       border-collapse  collapse     make simple 1px lines borders if border defined      tr       width  100       outer-container       background-color   ccc      position  absolute      top 0      left  0      right  300px      bottom 40px      overflow  scroll      inner-container       width  100       height  100       position  relative      overflow-x  visible      overflow-y visible     table-header       float left      width  100      table-body       float left      height  auto      width  auto      overflow  visible      background-color  red     header-cell       background-color  yellow      text-align  left      height  40px     body-cell       background-color  transparent      text-align  left     col1   col3   col4   col5       width 120px      min-width  120px     col2       min-width  300px      Let me know if this is what you need  Or some thing is missing  I went through the other answers and found that jquery has been used   I took it on assumption that you need css solution   If I am missing any more point please mention

User · Answer

This is not an easy one  I ve come up with a Script solution   I don t think this can be done using pure CSS   the HTML stays the same as you posted  the CSS changes a little bit  JQuery code added   Working Fiddle Tested on  IE10  IE9  IE8  FF  Chrome  BTW  if you have unique elements  why don t you use id s instead of classes  I think it gives a better selector performance   Explanation of how it works  inner-container will span the entire space of the outer-container  so basically  he s not needed  but I left him there  so you wont need to change you DOM   the table-header is relatively positioned  without a scroll  overflow  hidden   we will handle his scroll later   the table-body have to span the rest of the inner-container height  so I used a script to determine what height to fix him   it changes dynamically when you re-size the window  without a fixed height  the scroll wont appear  because the div will just grow large instead   notice that this part can be done without script  if you fix the header height and use CSS3  as shown in the end of the answer   now it s just a matter of moving the header along with the body each time we scroll  this is done by a function assigned to the scroll event   CSS  some of it was copied from your style           padding  0      margin  0     body       height  100       width  100     table       border-collapse  collapse     make simple 1px lines borders if border defined       outer-container       background-color   ccc      position  absolute      top 0      left  0      right  300px      bottom  40px      inner-container       height  100       overflow  hidden      table-header       position  relative     table-body       overflow  auto      header-cell       background-color  yellow      text-align  left      height  40px     body-cell        background-color  blue      text-align  left     col1   col3   col4   col5       width 120px      min-width  120px     col2       min-width  300px      JQuery    document  ready function          setTableBody          window  resize setTableBody           table-body   scroll function                      table-header   offset   left  -1 this scrollLeft                  function setTableBody             table-body   height     inner-container   height   -     table-header   height         If you don t care about fixing the header height  I saw that you fixed the cell s height in your CSS   some of the Script can be skiped if you use CSS3  Shorter Fiddle  this will not work on IE8

User · Answer

you can use following CSS code    body       margin 0      padding 0      height  100       width  100     table       border-collapse  collapse     make simple 1px lines borders if border defined      tr       width  100       outer-container       background-color   ccc          top 0      left  0      right  300px      bottom 40px      overflow hidden      inner-container       width  100       height  100       position  relative      table-header       float left      width  100      table-body       float left      height  100       width  inherit      header-cell       background-color  yellow      text-align  left      height  40px     body-cell       background-color  blue      text-align  left     col1   col3   col4   col5       width 120px      min-width  120px     col2       min-width  300px

[html] Fixed header table with horizontal scrollbar and vertical scrollbar on

Examples related to html

Examples related to css

Examples related to header

Examples related to html-table

Examples related to fixed