CSS-Only Scrollable Table with fixed headers

Question

I have a solution by which I can create scrollable tables w fixed header footer using minor jQuery and CSS - but I am looking for a way to make this a CSS-only solution that is cross-browser compliant   To be clear  what I am seeking to do is use only a table tag  and it s valid sub-tags  colgroup  col  thead  tbody  tfoot  tr  th  td   but adopt a set of CSS rules which will meet the following conditions    Must maintain column alignment between header   footer   content rows Must allow the header footer to remain fixed while the content scrolls vertically Must not require any jQuery or other JavaScript in order to provide the functionality Must only use the tags provided above   This code example  http   jsfiddle net TroyAlford SNKfd  shows my current approach  Most of the JS is just to populate the table with random values  but the last portion is what drives the left right scrollability    tbody bind  scroll   function ev        var  css      left   -ev target scrollLeft         thead css  css        tfoot css  css         NOTE  The example provided does not render properly in IE  and requires jQuery to provide the horizontal scrolling  I don t care about horizontal scrolling anyway  so it s fine if a solution doesn t do that

User · Answer

If you have the option of giving a fixed width to the table cells (and a fixed height to the header), you can used the position: fixed option:

http://jsfiddle.net/thundercracker/ZxPeh/23/

You would just have to stick it in an iframe. You could also have horizontal scrolling by giving the iframe a scrollbar (I think).

Edit 2015

If you can live with a pre-defining the width of your table cells (by percentage), then here's a bit more elegant (CSS-only) solution:

http://jsfiddle.net/7UBMD/77/

User · Answer

Ive achieved this easily using this code    So you have a structure like this     lt table gt   lt thead gt  lt tr gt  lt  tr gt  lt  thead gt   lt tbody gt  lt tr gt  lt  tr gt  lt  tbody gt   lt  table gt    just style the thead with     lt style gt  thead       position  -webkit-sticky      position  -moz-sticky      position  -ms-sticky      position  -o-sticky      position  sticky      top  0px     lt  style gt    Three things to consider     First  this property is new  It   s not supported at all  apart from the beta builds of Webkit-based browsers  So caveat formator  Again  if you really want for your users to benefit from sticky headers  go with a javascript implementation   Second  if you do use it  you   ll need to incorporate vendor prefixes  Perhaps position  sticky will work one day  For now  though  you need to use position -webkit-sticky  and the others  check the block of css further up in this post    Third  there aren   t any positioning defaults at the moment  so you need to at least include top  0  in the same css declaration as the position -webkit-sticky  Otherwise  it   ll just scroll off-screen

User · Answer

Another implementation but without any overflow on tbody and dynamic columns  Requires JavaScript though  A container div is used to house the column headings  When the table is scrolled past the view port  a fixed header appears at the top  If table is scrolled horizontally  the fixed header scrolls as well   Column headings are created using span elements with display  inline-block and a negative margin is used to scroll header horizontally  Also optimized using RequestAnimationFrame to avoid any jank   function rAF scrollLeft      var offsetLeft   0 - scrollLeft        hdr  inner span first-child   css  margin-left   offsetLeft       https   codepen io lloydleo pen NRpqEE

User · Answer

As far as I know  there is no standard way to achieve this with only CSS  although I think there should be  Mozilla browsers used to support fixed headers with a scrolling body  but they ve removed it in the last few years   After researching this a bit  including finding this posting  a friend just developed this solution for me  it uses Javascript but no canned libraries  and the only requirement for the HTML markup is that the table have an id name  Then  at window onload  to call one Javascript function for each table giving the id  height  and width  If Javascript is disabled at the browser  the whole table is displayed according to its original markup  If Javascript is enabled  the table is fit into the specified height and width  and tbody scrolls  and if thead and tfoot exist  they are fixed at top and bottom

User · Answer

Inspired by  Purag s answer  here s another flexbox solution    x000D   x000D     basic settings    x000D  table   display  flex  flex-direction  column  width  200px    x000D  tr   display  flex    x000D  th nth-child 1   td nth-child 1    flex-basis  35     x000D  th nth-child 2   td nth-child 2    flex-basis  65     x000D  thead  tbody   overflow-y  scroll    x000D  tbody   height  100px    x000D   x000D     color settings   x000D  table  th  td   border  1px solid black    x000D  tr nth-child odd    background   EEE    x000D  tr nth-child even    background   AAA    x000D  thead tr first-child   background   333    x000D  th first-child  td first-child   background  rgba 200 200 0 0 7     x000D  th last-child  td last-child   background  rgba 255 200 0 0 7     x000D   lt table gt  x000D       lt thead gt  x000D         lt tr gt  x000D           lt th gt a x000D           lt th gt bbbb x000D       lt tbody gt  x000D         lt tr gt  x000D           lt td gt fooo vsync dynamic x000D           lt td gt bar x000D         lt tr gt  x000D           lt td gt a x000D           lt td gt b x000D         lt tr gt  x000D           lt td gt a x000D           lt td gt b x000D         lt tr gt  x000D           lt td gt a x000D           lt td gt b x000D         lt tr gt  x000D           lt td gt a x000D           lt td gt b x000D         lt tr gt  x000D           lt td gt a x000D           lt td gt b x000D         lt tr gt  x000D           lt td gt a x000D           lt td gt b x000D     lt  table gt  x000D   x000D   x000D

User · Answer

This answer will be used as a placeholder for the not fully supported position  sticky and will be updated over time  It is currently advised to not use the native implementation of this in a production environment   See this for the current support  https   caniuse com  feat css-sticky    Use of position  sticky  An alternative answer would be using position  sticky  As described by W3C      A stickily positioned box is positioned similarly to a relatively positioned box  but the offset is computed with reference to the nearest ancestor with a scrolling box  or the viewport if no ancestor has a scrolling box    This described exactly the behavior of a relative static header  It would be easy to assign this to the  lt thead gt  or the first  lt tr gt  HTML-tag  as this should be supported according to W3C  However  both Chrome  IE and Edge have problems assigning a sticky position property to these tags  There also seems to be no priority in solving this at the moment   What does seem to work for a table element is assigning the sticky property to a table-cell  In this case the  lt th gt  cells   Because a table is not a block-element that respects the static size you assign to it  it is best to use a wrapper element to define the scroll-overflow   The code   x000D   x000D  div   x000D    display  inline-block  x000D    height  150px  x000D    overflow  auto x000D    x000D   x000D  table th   x000D    position  -webkit-sticky  x000D    position  sticky  x000D    top  0  x000D    x000D   x000D   x000D        Just general styling  not relevant          x000D   x000D  table   x000D    border-collapse  collapse  x000D    x000D   x000D  th   x000D    background-color   1976D2  x000D    color   fff  x000D    x000D   x000D  th  x000D  td   x000D    padding  1em  5em  x000D    x000D   x000D  table tr   x000D    color   212121  x000D    x000D   x000D  table tr nth-child odd    x000D    background-color   BBDEFB  x000D    x000D   lt div gt  x000D     lt table border  0  gt  x000D       lt thead gt  x000D         lt tr gt  x000D           lt th gt head1 lt  th gt  x000D           lt th gt head2 lt  th gt  x000D           lt th gt head3 lt  th gt  x000D           lt th gt head4 lt  th gt  x000D         lt  tr gt  x000D       lt  thead gt  x000D       lt tr gt  x000D         lt td gt row 1  cell 1 lt  td gt  x000D         lt td gt row 1  cell 2 lt  td gt  x000D         lt td gt row 1  cell 2 lt  td gt  x000D         lt td gt row 1  cell 2 lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt row 2  cell 1 lt  td gt  x000D         lt td gt row 2  cell 2 lt  td gt  x000D         lt td gt row 1  cell 2 lt  td gt  x000D         lt td gt row 1  cell 2 lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt row 2  cell 1 lt  td gt  x000D         lt td gt row 2  cell 2 lt  td gt  x000D         lt td gt row 1  cell 2 lt  td gt  x000D         lt td gt row 1  cell 2 lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt row 2  cell 1 lt  td gt  x000D         lt td gt row 2  cell 2 lt  td gt  x000D         lt td gt row 1  cell 2 lt  td gt  x000D         lt td gt row 1  cell 2 lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt row 2  cell 1 lt  td gt  x000D         lt td gt row 2  cell 2 lt  td gt  x000D         lt td gt row 1  cell 2 lt  td gt  x000D         lt td gt row 1  cell 2 lt  td gt  x000D       lt  tr gt  x000D     lt  table gt  x000D   lt  div gt  x000D   x000D   x000D    In this example I use a simple  lt div gt  wrapper to define the scroll-overflow done with a static height of 150px  This can of course be any size  Now that the scrolling box has been defined  the sticky  lt th gt  elements will corespondent  to the nearest ancestor with a scrolling box   which is the div-wrapper     Use of a position  sticky polyfill  Non-supported devices can make use of a polyfill  which implements the behavior through code  An example is stickybits  which resembles the same behavior as the browser s implemented position  sticky   Example with polyfill  http   jsfiddle net 7UZA4 6957

User · Answer

Surprised a solution using flexbox hasn t been posted yet   Here s my solution using display  flex and a basic use of  after  thanks to Luggage  to maintain the alignment even with the scrollbar padding the tbody a bit  This has been verified in Chrome 45  Firefox 39  and MS Edge  It can be modified with prefixed properties to work in IE11  and further in IE10 with a CSS hack and the 2012 flexbox syntax   Note the table width can be modified  this even works at 100  width   The only caveat is that all table cells must have the same width  Below is a clearly contrived example  but this works fine when cell contents vary  table cells all have the same width and word wrapping on  forcing flexbox to keep them the same width regardless of content   Here is an example where cell contents are different   Just apply the  scroll class to a table you want scrollable  and make sure it has a thead    x000D   x000D   scroll   x000D    border  0  x000D    border-collapse  collapse  x000D    x000D   x000D   scroll tr   x000D    display  flex  x000D    x000D   x000D   scroll td   x000D    padding  3px  x000D    flex  1 auto  x000D    border  1px solid  aaa  x000D    width  1px  x000D    word-wrap  break-word  x000D    x000D   x000D   scroll thead tr after   x000D    content      x000D    overflow-y  scroll  x000D    visibility  hidden  x000D    height  0  x000D    x000D   x000D   scroll thead th   x000D    flex  1 auto  x000D    display  block  x000D    border  1px solid  000  x000D    x000D   x000D   scroll tbody   x000D    display  block  x000D    width  100   x000D    overflow-y  auto  x000D    height  200px  x000D    x000D   lt table class  scroll  width  400px  gt  x000D     lt thead gt  x000D       lt tr gt  x000D         lt th gt Header lt  th gt  x000D         lt th gt Header lt  th gt  x000D         lt th gt Header lt  th gt  x000D         lt th gt Header lt  th gt  x000D         lt th gt Header lt  th gt  x000D         lt th gt Header lt  th gt  x000D       lt  tr gt  x000D     lt  thead gt  x000D     lt tr gt  x000D       lt td gt Data lt  td gt  x000D       lt td gt Data lt  td gt  x000D       lt td gt Data lt  td gt  x000D       lt td gt Data lt  td gt  x000D       lt td gt Data lt  td gt  x000D       lt td gt Data lt  td gt  x000D     lt  tr gt  x000D     lt tr gt  x000D       lt td gt Data lt  td gt  x000D       lt td gt Data lt  td gt  x000D       lt td gt Data lt  td gt  x000D       lt td gt Data lt  td gt  x000D       lt td gt Data lt  td gt  x000D       lt td gt Data lt  td gt  x000D     lt  tr gt  x000D     lt tr gt  x000D       lt td gt Data lt  td gt  x000D       lt td gt Data lt  td gt  x000D       lt td gt Data lt  td gt  x000D       lt td gt Data lt  td gt  x000D       lt td gt Data lt  td gt  x000D       lt td gt Data lt  td gt  x000D     lt  tr gt  x000D     lt tr gt  x000D       lt td gt Data lt  td gt  x000D       lt td gt Data lt  td gt  x000D       lt td gt Data lt  td gt  x000D       lt td gt Data lt  td gt  x000D       lt td gt Data lt  td gt  x000D       lt td gt Data lt  td gt  x000D     lt  tr gt  x000D     lt tr gt  x000D       lt td gt Data lt  td gt  x000D       lt td gt Data lt  td gt  x000D       lt td gt Data lt  td gt  x000D       lt td gt Data lt  td gt  x000D       lt td gt Data lt  td gt  x000D       lt td gt Data lt  td gt  x000D     lt  tr gt  x000D     lt tr gt  x000D       lt td gt Data lt  td gt  x000D       lt td gt Data lt  td gt  x000D       lt td gt Data lt  td gt  x000D       lt td gt Data lt  td gt  x000D       lt td gt Data lt  td gt  x000D       lt td gt Data lt  td gt  x000D     lt  tr gt  x000D     lt tr gt  x000D       lt td gt Data lt  td gt  x000D       lt td gt Data lt  td gt  x000D       lt td gt Data lt  td gt  x000D       lt td gt Data lt  td gt  x000D       lt td gt Data lt  td gt  x000D       lt td gt Data lt  td gt  x000D     lt  tr gt  x000D     lt tr gt  x000D       lt td gt Data lt  td gt  x000D       lt td gt Data lt  td gt  x000D       lt td gt Data lt  td gt  x000D       lt td gt Data lt  td gt  x000D       lt td gt Data lt  td gt  x000D       lt td gt Data lt  td gt  x000D     lt  tr gt  x000D     lt tr gt  x000D       lt td gt Data lt  td gt  x000D       lt td gt Data lt  td gt  x000D       lt td gt Data lt  td gt  x000D       lt td gt Data lt  td gt  x000D       lt td gt Data lt  td gt  x000D       lt td gt Data lt  td gt  x000D     lt  tr gt  x000D     lt tr gt  x000D       lt td gt Data lt  td gt  x000D       lt td gt Data lt  td gt  x000D       lt td gt Data lt  td gt  x000D       lt td gt Data lt  td gt  x000D       lt td gt Data lt  td gt  x000D       lt td gt Data lt  td gt  x000D     lt  tr gt  x000D     lt tr gt  x000D       lt td gt Data lt  td gt  x000D       lt td gt Data lt  td gt  x000D       lt td gt Data lt  td gt  x000D       lt td gt Data lt  td gt  x000D       lt td gt Data lt  td gt  x000D       lt td gt Data lt  td gt  x000D     lt  tr gt  x000D     lt tr gt  x000D       lt td gt Data lt  td gt  x000D       lt td gt Data lt  td gt  x000D       lt td gt Data lt  td gt  x000D       lt td gt Data lt  td gt  x000D       lt td gt Data lt  td gt  x000D       lt td gt Data lt  td gt  x000D     lt  tr gt  x000D     lt tr gt  x000D       lt td gt Data lt  td gt  x000D       lt td gt Data lt  td gt  x000D       lt td gt Data lt  td gt  x000D       lt td gt Data lt  td gt  x000D       lt td gt Data lt  td gt  x000D       lt td gt Data lt  td gt  x000D     lt  tr gt  x000D     lt tr gt  x000D       lt td gt Data lt  td gt  x000D       lt td gt Data lt  td gt  x000D       lt td gt Data lt  td gt  x000D       lt td gt Data lt  td gt  x000D       lt td gt Data lt  td gt  x000D       lt td gt Data lt  td gt  x000D     lt  tr gt  x000D     lt tr gt  x000D       lt td gt Data lt  td gt  x000D       lt td gt Data lt  td gt  x000D       lt td gt Data lt  td gt  x000D       lt td gt Data lt  td gt  x000D       lt td gt Data lt  td gt  x000D       lt td gt Data lt  td gt  x000D     lt  tr gt  x000D     lt tr gt  x000D       lt td gt Data lt  td gt  x000D       lt td gt Data lt  td gt  x000D       lt td gt Data lt  td gt  x000D       lt td gt Data lt  td gt  x000D       lt td gt Data lt  td gt  x000D       lt td gt Data lt  td gt  x000D     lt  tr gt  x000D     lt tr gt  x000D       lt td gt Data lt  td gt  x000D       lt td gt Data lt  td gt  x000D       lt td gt Data lt  td gt  x000D       lt td gt Data lt  td gt  x000D       lt td gt Data lt  td gt  x000D       lt td gt Data lt  td gt  x000D     lt  tr gt  x000D     lt tr gt  x000D       lt td gt Data lt  td gt  x000D       lt td gt Data lt  td gt  x000D       lt td gt Data lt  td gt  x000D       lt td gt Data lt  td gt  x000D       lt td gt Data lt  td gt  x000D       lt td gt Data lt  td gt  x000D     lt  tr gt  x000D   lt  table gt  x000D   x000D   x000D

User · Answer

if it gets rock hard where all the mentioned solutions don t work  as it got for me   try a two-tabled solutioned  as I explained in this answer  https   stackoverflow com a 47722456 6488361

User · Answer

I was trying to figure this out myself recently  and I came up with a good solution that works perfectly in my browser  Chrome 51  and supports dynamic column widths  I should mention that after I independently derived my answer I also found a similar technique described elsewhere on the web     The trick is to use two identical tables positioned on top of one another  The lower table is visible and the upper table is invisible expect for the header  The upper table also has pointer-events  none set on the tbody so mouse interactions hit the underneath table  This way the lower table scrolls under the upper table s header   For everything to layout and resize properly  when the user adjusts screen width for instance   both tables need to have the same scrollbar behavior  However  the upper table s scroll bar is ignored thanks to the pointer-events  none and can be made invisible with     lt style gt       hiddenScrollbar  -webkit-scrollbar           background-color  transparent         lt  style gt    Here is the complete code    x000D   x000D   lt html gt  x000D   x000D   lt head gt  x000D     lt style gt  x000D      td   x000D        border  1px solid black   x000D        white-space  nowrap  x000D        x000D      th   x000D        background-color  gray  x000D        border  1px solid black  x000D        white-space  nowrap  x000D        x000D       hiddenScrollbar  -webkit-scrollbar   x000D        background-color  transparent  x000D        x000D     lt  style gt  x000D   lt  head gt  x000D   x000D   lt body gt  x000D    Table test  Use mouse wheel to scroll or scroll to the right to see vertical scroll bar  You can also remove the outermost div if you don t want a horizontal scroll bar  x000D     lt br  gt  x000D     lt div style  display  inline-block  height  10em  width  15em  overflow-x  scroll  overflow-y  hidden  gt  x000D       lt div style  position  relative   gt  x000D         lt div style  display  inline-block  position  absolute  left  0px  top  0px  height  10em  overflow-y  scroll  gt  x000D           lt table style  border-collapse  collapse   gt  x000D             lt thead gt  x000D               lt tr gt  x000D                 lt th gt Column 1 lt  th gt  x000D                 lt th gt Another Column 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 123409213750213 lt  td gt  x000D               lt  tr gt  x000D               lt tr gt  x000D                 lt td gt Data 2 lt  td gt  x000D                 lt td gt 123409213750213 lt  td gt  x000D               lt  tr gt  x000D               lt tr gt  x000D                 lt td gt Data 3 lt  td gt  x000D                 lt td gt 123409213750213 lt  td gt  x000D               lt  tr gt  x000D               lt tr gt  x000D                 lt td gt Data 4 lt  td gt  x000D                 lt td gt 123409213750213 lt  td gt  x000D               lt  tr gt  x000D               lt tr gt  x000D                 lt td gt Data 5 lt  td gt  x000D                 lt td gt 123409213750213 lt  td gt  x000D               lt  tr gt  x000D               lt tr gt  x000D                 lt td gt Data 6 lt  td gt  x000D                 lt td gt 12340921375021342354235 very long    lt  td gt  x000D               lt  tr gt  x000D               lt tr gt  x000D                 lt td gt Data 7 lt  td gt  x000D                 lt td gt 123409213750213 lt  td gt  x000D               lt  tr gt  x000D               lt tr gt  x000D                 lt td gt Data 8 lt  td gt  x000D                 lt td gt 123409213750213 lt  td gt  x000D               lt  tr gt  x000D               lt tr gt  x000D                 lt td gt Data 9 lt  td gt  x000D                 lt td gt 123409213750213 lt  td gt  x000D               lt  tr gt  x000D               lt tr gt  x000D                 lt td gt Data 10 lt  td gt  x000D                 lt td gt 123409213750213 lt  td gt  x000D               lt  tr gt  x000D               lt tr gt  x000D                 lt td gt Data 11 lt  td gt  x000D                 lt td gt 123409213750213 lt  td gt  x000D               lt  tr gt  x000D               lt tr gt  x000D                 lt td gt Data 12 lt  td gt  x000D                 lt td gt 123409213750213 lt  td gt  x000D               lt  tr gt  x000D             lt  tbody gt  x000D           lt  table gt  x000D         lt  div gt  x000D         lt div class  hiddenScrollbar  style  display  inline-block  pointer-events  none  position  relative  left  0px  top  0px  height  10em  overflow-y  scroll  gt  x000D           lt table style  border-collapse  collapse   gt  x000D             lt thead style  pointer-events  auto  gt  x000D               lt tr gt  x000D                 lt th gt Column 1 lt  th gt  x000D                 lt th gt Another Column lt  th gt  x000D               lt  tr gt  x000D             lt  thead gt  x000D             lt tbody style  visibility  hidden  gt  x000D               lt tr gt  x000D                 lt tr gt  x000D                   lt td gt Data 1 lt  td gt  x000D                   lt td gt 123409213750213 lt  td gt  x000D                 lt  tr gt  x000D                 lt tr gt  x000D                   lt td gt Data 2 lt  td gt  x000D                   lt td gt 123409213750213 lt  td gt  x000D                 lt  tr gt  x000D                 lt tr gt  x000D                   lt td gt Data 3 lt  td gt  x000D                   lt td gt 123409213750213 lt  td gt  x000D                 lt  tr gt  x000D                 lt tr gt  x000D                   lt td gt Data 4 lt  td gt  x000D                   lt td gt 123409213750213 lt  td gt  x000D                 lt  tr gt  x000D                 lt tr gt  x000D                   lt td gt Data 5 lt  td gt  x000D                   lt td gt 123409213750213 lt  td gt  x000D                 lt  tr gt  x000D                 lt tr gt  x000D                   lt td gt Data 6 lt  td gt  x000D                   lt td gt 12340921375021342354235 very long    lt  td gt  x000D                 lt  tr gt  x000D                 lt tr gt  x000D                   lt td gt Data 7 lt  td gt  x000D                   lt td gt 123409213750213 lt  td gt  x000D                 lt  tr gt  x000D                 lt tr gt  x000D                   lt td gt Data 8 lt  td gt  x000D                   lt td gt 123409213750213 lt  td gt  x000D                 lt  tr gt  x000D                 lt tr gt  x000D                   lt td gt Data 9 lt  td gt  x000D                   lt td gt 123409213750213 lt  td gt  x000D                 lt  tr gt  x000D                 lt tr gt  x000D                   lt td gt Data 10 lt  td gt  x000D                   lt td gt 123409213750213 lt  td gt  x000D                 lt  tr gt  x000D                 lt tr gt  x000D                   lt td gt Data 11 lt  td gt  x000D                   lt td gt 123409213750213 lt  td gt  x000D                 lt  tr gt  x000D                 lt tr gt  x000D                   lt td gt Data 12 lt  td gt  x000D                   lt td gt 123409213750213 lt  td gt  x000D                 lt  tr gt  x000D               lt  tr gt  x000D             lt  tbody gt  x000D           lt  table gt  x000D         lt  div gt  x000D       lt  div gt  x000D     lt  div gt  lt br  gt  x000D  Stuff after table  x000D   lt  body gt  x000D   x000D   lt  html gt  x000D   x000D   x000D    Caveats  More work is required to prove this works in other browsers  Also I was rather liberal in mixing inline and stylesheet styles  However I believe the general concept is the best way of doing this since if the target browser supports it  The only functionality display issues are that if you want a horizontal scroll bar  the vertical scroll bar can get scrolled out of view  as shown in the snippet   You can still scroll with the mouse wheel though  Additionally you can t have a transparent background on the header  otherwise the underneath table would show through   Finally you need a way to generate two identical tables  Personally I am using react js and it is easy to do it with react  but php or other server-side generation or javascript will also work

User · Answer

I see this thread has been inactive for a while  but this topic interested me and now with some CSS3 selectors  this just became easier  and pretty doable with only CSS     This solution relies on having a max height of the table container  But it is supported as long as you can use the  first-child selector   Fiddle here   If anyone can improve on this answer  please do  I plan on using this solution in a commercial app soon   HTML   lt div id  con  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  tr gt       lt  thead gt               lt tbody gt                    lt  tbody gt   lt  table gt   lt  div gt    CSS   con      max-height 300px      overflow-y auto    thead tr first-child       background-color  00f      color  fff      position absolute    tbody tr first-child td      padding-top 28px

User · Answer

I had the same problem and after spending 2 days researching I found this solution from Ksesocss that fits for me and maybe is good for you too  It allows fixed header and dynamic width and only uses CSS  The only problem is that the source is in spanish but you can find the html and css code there   This is the link   http   ksesocss blogspot com 2014 10 responsive-table-encabezado-fijo-scroll html  I hope this helps

User · Answer

Only with CSS     CSS   tr     width  100     display  inline-table    table-layout  fixed     table   height 300px                   lt -- Select the height of the table  display  -moz-groupbox        Firefox Bad Effect   tbody    overflow-y  scroll          height  200px                  lt -- Select the height of the body   width  100     position  absolute      Bootply   http   www bootply com AgI8LpDugl

User · Answer

As I was recently in need of this  I will share a solution that uses 3 tables  but does not require JavaScript   Table 1  parent  contains two rows  The first row contains table 2  child 1  for the column headers  The second row contains table 3  child 2  for the scrolling content   It must be noted the childTbl must be 25px shorter than the parentTbl for the scroller to appear properly   This is the source  where I got the idea from  I made it HTML5-friendly without the deprecated tags and the inline CSS    x000D   x000D   parentTbl table   x000D    border-spacing  0  x000D    border-collapse  collapse  x000D    border  0  x000D    width  690px  x000D    x000D   childTbl table   x000D    border-spacing  0  x000D    border-collapse  collapse  x000D    border  1px solid  d7d7d7  x000D    width  665px  x000D    x000D   childTbl th  x000D   childTbl td   x000D    border  1px solid  d7d7d7  x000D    x000D   scrollData   x000D    width  690  x000D    height  150px  x000D    overflow-x  hidden  x000D    x000D   lt div class  parentTbl  gt  x000D     lt table gt  x000D       lt tr gt  x000D         lt td gt  x000D           lt div class  childTbl  gt  x000D             lt table class  childTbl  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  tr gt  x000D             lt  table gt  x000D           lt  div gt  x000D         lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt  x000D           lt div class  scrollData childTbl  gt  x000D             lt table gt  x000D               lt tr gt  x000D                 lt td gt Table Data 1 lt  td gt  x000D                 lt td gt Table Data 2 lt  td gt  x000D                 lt td gt Table Data 3 lt  td gt  x000D                 lt td gt Table Data 4 lt  td gt  x000D                 lt td gt Table Data 5 lt  td gt  x000D                 lt td gt Table Data 6 lt  td gt  x000D               lt  tr gt  x000D               lt tr gt  x000D                 lt td gt Table Data 1 lt  td gt  x000D                 lt td gt Table Data 2 lt  td gt  x000D                 lt td gt Table Data 3 lt  td gt  x000D                 lt td gt Table Data 4 lt  td gt  x000D                 lt td gt Table Data 5 lt  td gt  x000D                 lt td gt Table Data 6 lt  td gt  x000D               lt  tr gt  x000D               lt tr gt  x000D                 lt td gt Table Data 1 lt  td gt  x000D                 lt td gt Table Data 2 lt  td gt  x000D                 lt td gt Table Data 3 lt  td gt  x000D                 lt td gt Table Data 4 lt  td gt  x000D                 lt td gt Table Data 5 lt  td gt  x000D                 lt td gt Table Data 6 lt  td gt  x000D               lt  tr gt  x000D               lt tr gt  x000D                 lt td gt Table Data 1 lt  td gt  x000D                 lt td gt Table Data 2 lt  td gt  x000D                 lt td gt Table Data 3 lt  td gt  x000D                 lt td gt Table Data 4 lt  td gt  x000D                 lt td gt Table Data 5 lt  td gt  x000D                 lt td gt Table Data 6 lt  td gt  x000D               lt  tr gt  x000D               lt tr gt  x000D                 lt td gt Table Data 1 lt  td gt  x000D                 lt td gt Table Data 2 lt  td gt  x000D                 lt td gt Table Data 3 lt  td gt  x000D                 lt td gt Table Data 4 lt  td gt  x000D                 lt td gt Table Data 5 lt  td gt  x000D                 lt td gt Table Data 6 lt  td gt  x000D               lt  tr gt  x000D               lt tr gt  x000D                 lt td gt Table Data 1 lt  td gt  x000D                 lt td gt Table Data 2 lt  td gt  x000D                 lt td gt Table Data 3 lt  td gt  x000D                 lt td gt Table Data 4 lt  td gt  x000D                 lt td gt Table Data 5 lt  td gt  x000D                 lt td gt Table Data 6 lt  td gt  x000D               lt  tr gt  x000D               lt tr gt  x000D                 lt td gt Table Data 1 lt  td gt  x000D                 lt td gt Table Data 2 lt  td gt  x000D                 lt td gt Table Data 3 lt  td gt  x000D                 lt td gt Table Data 4 lt  td gt  x000D                 lt td gt Table Data 5 lt  td gt  x000D                 lt td gt Table Data 6 lt  td gt  x000D               lt  tr gt  x000D               lt tr gt  x000D                 lt td gt Table Data 1 lt  td gt  x000D                 lt td gt Table Data 2 lt  td gt  x000D                 lt td gt Table Data 3 lt  td gt  x000D                 lt td gt Table Data 4 lt  td gt  x000D                 lt td gt Table Data 5 lt  td gt  x000D                 lt td gt Table Data 6 lt  td gt  x000D               lt  tr gt  x000D               lt tr gt  x000D                 lt td gt Table Data 1 lt  td gt  x000D                 lt td gt Table Data 2 lt  td gt  x000D                 lt td gt Table Data 3 lt  td gt  x000D                 lt td gt Table Data 4 lt  td gt  x000D                 lt td gt Table Data 5 lt  td gt  x000D                 lt td gt Table Data 6 lt  td gt  x000D               lt  tr gt  x000D               lt tr gt  x000D                 lt td gt Table Data 1 lt  td gt  x000D                 lt td gt Table Data 2 lt  td gt  x000D                 lt td gt Table Data 3 lt  td gt  x000D                 lt td gt Table Data 4 lt  td gt  x000D                 lt td gt Table Data 5 lt  td gt  x000D                 lt td gt Table Data 6 lt  td gt  x000D               lt  tr gt  x000D             lt  table gt  x000D           lt  div gt  x000D         lt  td gt  x000D       lt  tr gt  x000D     lt  table gt  x000D   lt  div gt  x000D   x000D   x000D    This is reliable on different browsers  the downside would be having to hard code the table widths

[html] CSS-Only Scrollable Table with fixed headers

Examples related to html

Examples related to internet-explorer

Examples related to css