Table with fixed header and fixed column on pure css

Question

I need to create a html table  or something similar looking  with a fixed header and a fixed first column    Every solution I ve seen so far uses Javascript or jQuery to set scrollTop scrollLeft  but it doesn t work smoothly on mobile browsers  so I m looking for a pure CSS solution   I found a solution for a fixed column here  jsfiddle net C8Dtf 20  but I don t know how I can enhance it to make the header fixed too   I want it to work on webkit browsers or use some css3 features  but I repeat  I don t want to use Javascript for scrolling   EDIT  This is example of the behaviour I want to achieve  https   web archive org web 20130829032141 http   datatables net release-datatables extras FixedColumns css size html

User · Answer

Something like this may work for you    It will probably require you to have set column widths for your header row   thead        position  fixed      http   jsfiddle net vkhNC   Update   I am not convinced that the example you gave is possible with just CSS   I would love for someone to prove me wrong   Here is what I have so far   It is not the finished product but it could be a start for you   I hope this points you in a helpful direction  wherever that may be

User · Answer

An example using only CSS    x000D   x000D   table   x000D    table-layout  fixed  x000D    width  500px  x000D    border-collapse  collapse  x000D    x000D   x000D   header th   x000D    font-family  Calibri  x000D    font-size  small  x000D    font-weight  lighter  x000D    border-left  1px solid  000  x000D    background   d0d0d0  x000D    x000D   x000D   body panel   x000D    display  inline-block  x000D    width  520px  x000D    height  300px  x000D    overflow-y  scroll  x000D    x000D   x000D   body tr   x000D    border-bottom  1px solid  d0d0d0  x000D    x000D   x000D   body td   x000D    border-left  1px solid  d0d0d0  x000D    padding-left  3px  x000D    font-family  Calibri  x000D    font-size  small  x000D    overflow  hidden  x000D    white-space  nowrap  x000D    text-overflow  ellipsis  x000D    x000D   lt body gt  x000D   x000D     lt table class  table  gt  x000D   x000D       lt thead class  header  gt  x000D   x000D         lt tr gt  x000D           lt th style  width 20    gt teste lt  th gt  x000D           lt th style  width 30    gt teste 2 lt  th gt  x000D           lt th style  width 50    gt teste 3 lt  th gt  x000D         lt  tr gt  x000D   x000D       lt  thead gt  x000D     lt  table gt  x000D   x000D     lt div class  body panel  gt  x000D   x000D       lt table class  table  gt  x000D         lt tbody class  body  gt  x000D   x000D           lt tr gt  x000D             lt td style  width 20    gt asbkj k kajsb ksb kabkb lt  td gt  x000D             lt td style  width 30    gt 2 lt  td gt  x000D             lt td style  width 50    gt 3 lt  td gt  x000D           lt  tr gt  x000D   x000D           lt tr gt  x000D             lt td style  width 20    gt 2 lt  td gt  x000D             lt td style  width 30    gt 2 lt  td gt  x000D             lt td style  width 50    gt 3 lt  td gt  x000D           lt  tr gt  x000D   x000D           lt tr gt  x000D             lt td style  width 20    gt 2 lt  td gt  x000D             lt td style  width 30    gt 2 lt  td gt  x000D             lt td style  width 50    gt 3 lt  td gt  x000D           lt  tr gt  x000D   x000D           lt tr gt  x000D             lt td style  width 20    gt 2 lt  td gt  x000D             lt td style  width 30    gt 2 lt  td gt  x000D             lt td style  width 50    gt 3 lt  td gt  x000D           lt  tr gt  x000D   x000D           lt tr gt  x000D             lt td style  width 20    gt 2 lt  td gt  x000D             lt td style  width 30    gt 2 lt  td gt  x000D             lt td style  width 50    gt 3 lt  td gt  x000D           lt  tr gt  x000D   x000D           lt tr gt  x000D             lt td style  width 20    gt 2 lt  td gt  x000D             lt td style  width 30    gt 2 lt  td gt  x000D             lt td style  width 50    gt 3 lt  td gt  x000D           lt  tr gt  x000D   x000D           lt tr gt  x000D             lt td style  width 20    gt 2 lt  td gt  x000D             lt td style  width 30    gt 2 lt  td gt  x000D             lt td style  width 50    gt 3 lt  td gt  x000D           lt  tr gt  x000D   x000D           lt tr gt  x000D             lt td style  width 20    gt 2 lt  td gt  x000D             lt td style  width 30    gt 2 lt  td gt  x000D             lt td style  width 50    gt 3 lt  td gt  x000D           lt  tr gt  x000D   x000D           lt tr gt  x000D             lt td style  width 20    gt 2 lt  td gt  x000D             lt td style  width 30    gt 2 lt  td gt  x000D             lt td style  width 50    gt 3 lt  td gt  x000D           lt  tr gt  x000D   x000D           lt tr gt  x000D             lt td style  width 20    gt 2 lt  td gt  x000D             lt td style  width 30    gt 2 lt  td gt  x000D             lt td style  width 50    gt 3 lt  td gt  x000D           lt  tr gt  x000D   x000D           lt tr gt  x000D             lt td style  width 20    gt 2 lt  td gt  x000D             lt td style  width 30    gt 2 lt  td gt  x000D             lt td style  width 50    gt 3 lt  td gt  x000D           lt  tr gt  x000D   x000D           lt tr gt  x000D             lt td style  width 20    gt 2 lt  td gt  x000D             lt td style  width 30    gt 2 lt  td gt  x000D             lt td style  width 50    gt 3 lt  td gt  x000D           lt  tr gt  x000D   x000D           lt tr gt  x000D             lt td style  width 20    gt 2 lt  td gt  x000D             lt td style  width 30    gt 2 lt  td gt  x000D             lt td style  width 50    gt 3 lt  td gt  x000D           lt  tr gt  x000D   x000D           lt tr gt  x000D             lt td style  width 20    gt 2 lt  td gt  x000D             lt td style  width 30    gt 2 lt  td gt  x000D             lt td style  width 50    gt 3 lt  td gt  x000D           lt  tr gt  x000D   x000D           lt tr gt  x000D             lt td style  width 20    gt 2 lt  td gt  x000D             lt td style  width 30    gt 2 lt  td gt  x000D             lt td style  width 50    gt 3 lt  td gt  x000D           lt  tr gt  x000D   x000D           lt tr gt  x000D             lt td style  width 20    gt 2 lt  td gt  x000D             lt td style  width 30    gt 2 lt  td gt  x000D             lt td style  width 50    gt 3 lt  td gt  x000D           lt  tr gt  x000D   x000D           lt tr gt  x000D             lt td style  width 20    gt 2 lt  td gt  x000D             lt td style  width 30    gt 2 lt  td gt  x000D             lt td style  width 50    gt 3 lt  td gt  x000D           lt  tr gt  x000D   x000D           lt tr gt  x000D             lt td style  width 20    gt 2 lt  td gt  x000D             lt td style  width 30    gt 2 lt  td gt  x000D             lt td style  width 50    gt 3 lt  td gt  x000D           lt  tr gt  x000D   x000D         lt  tbody gt  x000D       lt  table gt  x000D   x000D     lt  div gt  x000D   x000D   lt  body gt  x000D   x000D   x000D

User · Answer

x000D   x000D     Use overflow scroll on your container to enable scrolling     x000D   x000D  div   x000D    max-width  400px  x000D    max-height  150px  x000D    overflow  scroll  x000D    x000D   x000D   x000D     Use position  sticky to have it stick to the edge x000D     and top  right  or left to choose which edge to stick to     x000D   x000D  thead th   x000D    position  -webkit-sticky     for Safari    x000D    position  sticky  x000D    top  0  x000D    x000D   x000D  tbody th   x000D    position  -webkit-sticky     for Safari    x000D    position  sticky  x000D    left  0  x000D    x000D   x000D   x000D     To have the header in the first column stick to the left     x000D   x000D  thead th first-child   x000D    left  0  x000D    z-index  1  x000D    x000D   x000D   x000D     Just to display it nicely     x000D   x000D  thead th   x000D    background   000  x000D    color   FFF  x000D    x000D   x000D  tbody th   x000D    background   FFF  x000D    border-right  1px solid  CCC  x000D    x000D   x000D  table   x000D    border-collapse  collapse  x000D    x000D   x000D  td  x000D  th   x000D    padding  0 5em  x000D    x000D   lt div gt  x000D     lt table gt  x000D       lt thead gt  x000D         lt tr gt  x000D           lt th gt  lt  th gt  x000D           lt th gt headheadhead lt  th gt  x000D           lt th gt headheadhead lt  th gt  x000D           lt th gt headheadhead lt  th gt  x000D           lt th gt headheadhead lt  th gt  x000D           lt th gt headheadhead lt  th gt  x000D           lt th gt headheadhead lt  th gt  x000D           lt th gt headheadhead lt  th gt  x000D         lt  tr gt  x000D       lt  thead gt  x000D       lt tbody gt  x000D         lt tr gt  x000D           lt th gt head lt  th gt  x000D           lt td gt body lt  td gt  x000D           lt td gt body lt  td gt  x000D           lt td gt body lt  td gt  x000D           lt td gt body lt  td gt  x000D           lt td gt body lt  td gt  x000D           lt td gt body lt  td gt  x000D           lt td gt body lt  td gt  x000D         lt  tr gt  x000D         lt tr gt  x000D           lt th gt head lt  th gt  x000D           lt td gt body lt  td gt  x000D           lt td gt body lt  td gt  x000D           lt td gt body lt  td gt  x000D           lt td gt body lt  td gt  x000D           lt td gt body lt  td gt  x000D           lt td gt body lt  td gt  x000D           lt td gt body lt  td gt  x000D         lt  tr gt  x000D         lt tr gt  x000D           lt th gt head lt  th gt  x000D           lt td gt body lt  td gt  x000D           lt td gt body lt  td gt  x000D           lt td gt body lt  td gt  x000D           lt td gt body lt  td gt  x000D           lt td gt body lt  td gt  x000D           lt td gt body lt  td gt  x000D           lt td gt body lt  td gt  x000D         lt  tr gt  x000D         lt tr gt  x000D           lt th gt head lt  th gt  x000D           lt td gt body lt  td gt  x000D           lt td gt body lt  td gt  x000D           lt td gt body lt  td gt  x000D           lt td gt body lt  td gt  x000D           lt td gt body lt  td gt  x000D           lt td gt body lt  td gt  x000D           lt td gt body lt  td gt  x000D         lt  tr gt  x000D         lt tr gt  x000D           lt th gt head lt  th gt  x000D           lt td gt body lt  td gt  x000D           lt td gt body lt  td gt  x000D           lt td gt body lt  td gt  x000D           lt td gt body lt  td gt  x000D           lt td gt body lt  td gt  x000D           lt td gt body lt  td gt  x000D           lt td gt body lt  td gt  x000D         lt  tr gt  x000D         lt tr gt  x000D           lt th gt head lt  th gt  x000D           lt td gt body lt  td gt  x000D           lt td gt body lt  td gt  x000D           lt td gt body lt  td gt  x000D           lt td gt body lt  td gt  x000D           lt td gt body lt  td gt  x000D           lt td gt body lt  td gt  x000D           lt td gt body lt  td gt  x000D         lt  tr gt  x000D       lt  tbody gt  x000D     lt  table gt  x000D   lt  div gt  x000D   x000D   x000D    need to fix header footer

User · Answer

The existing answers will suit most people  but for those who are looking to add shadows under the fixed header and to the right of the first  fixed  column  here s a working example  pure css    http   jsbin com nayifepaxo 1 edit html output  The main trick in getting this to work is using   after to add shadows to the right of each of the first td in each tr   tr td first-child after     box-shadow  15px 0 15px -15px rgba 0  0  0  0 05  inset    content        position absolute    top 0    bottom 0    right -15px    width 15px      Took me a while  too long     to get it all working so I figured I d share for those who are in a similar situation

User · Answer

Here is another solution I have just build with css grids based on the answers in here  https   codesandbox io s sweet-resonance-m733i

User · Answer

After two days fighting with Internet Explorer 9   Chrome   Firefox  Windows  and Safari  Mac   I have found a system that is    Compatible with all these browsers Without using javascript  Using only une div and one table Fixed header and footer  Except for IE   with scrollable body  Header and body with same column widths   Result    HTML              lt thead gt       lt tr gt         lt th class  nombre  gt  lt    f label  cost center   gt  lt  th gt         lt th class  cabecera cc  gt Personal lt  th gt         lt th class  cabecera cc  gt Dpto lt  th gt       lt  tr gt     lt  thead gt     lt tbody gt       lt    cost centers each do  cc    gt       lt tr gt         lt td class  nombre  gt  lt    cc nombre corto   gt  lt  td gt         lt td class  cc  gt  lt    cc cacentrocoste   gt  lt  td gt         lt td class  cc  gt  lt    cc cacentrocoste dpto   gt  lt  td gt       lt  tr gt       lt   end   gt     lt  tbody gt     lt tfoot gt       lt tr gt         lt td colspan  3  gt  lt a href     gt Mostrar mas usuarios lt  a gt  lt  td gt       lt  tr gt     lt  tfoot gt   lt  table gt      CSS   div cost center    width 320px    font-size 75     margin-left 5px    margin-top 5px    margin-bottom  2px    float  right    display  inline-block    overflow-y  auto    overflow-x  hidden    max-height 300px       div cost center label      float none    font-size 14px     div cost center table    width 300px    border-collapse  collapse     float right    table-layout fixed     div cost center table tr    height 16px    div cost center th    font-weight normal     div cost center table tbody    display  block    overflow  auto    max-height 240px     div cost center table thead    display block     div cost center table tfoot    display block    div cost center table tfoot td    width 280px    div cost center  cc    width 60px    text-align  center     border  1px solid  999     div cost center  nombre    width 150px    div cost center tbody  nombre    border  1px solid  999     div cost center table tfoot td   text-align center     border  1px solid  999       div cost center table th   div cost center table td      padding  2px    vertical-align  middle      div cost center table tbody td     white-space  normal    font    8em 1 4em Verdana  sans-serif    color   000    background-color  white    div cost center table th cabecera      font   0 8em 1 4em Verdana  sans-serif    color   000    background-color   FFEAB5

User · Answer

Just need to change style as    lt table style  position  relative   gt      lt thead gt         lt thead gt           lt tr gt              lt th gt  lt  th gt           lt  tr gt         lt  thead gt      lt  thead gt      lt tbody style  position  absolute height  300px overflow auto   gt         lt tr gt            lt td gt  lt  td gt         lt  tr gt      lt  tbody gt   lt  table gt    Demo  https   plnkr co edit Qxy5RMJBXmkaJAOjBtQn p preview

User · Answer

I think this will help you      https   datatables net release-datatables extensions FixedHeader examples header footer html  In a nutshell  if you know how to create a dataTable  You just need to add this jQuery line to your bottom     document  ready function         var table       example   DataTable         new   fn dataTable FixedHeader  table            bottom  true                 bottom  true       is for making the Bottom header fixed as well

User · Answer

A co-worker and I have just released a new GitHub project that supplies an Angular directive that you can use to decorate your table with fixed headers  https   github com objectcomputing FixedHeader  It relies on css and angular only  with a directive that adds some divs  There is no jQuery required   This implementation isn t as fully-featured as some other implementations  but if your need is simply to add fixed tables  we think this might be a good option

User · Answer

This is no easy feat    The following link is to a working demo   Link Updated according to lanoxx s comment  http   jsfiddle net C8Dtf 366   Just remember to add these    lt script type  text javascript  charset  utf-8  src  http   datatables net release-datatables media js jquery js  gt  lt  script gt   lt script type  text javascript  charset  utf-8  src  http   datatables net release-datatables media js jquery dataTables js  gt  lt  script gt   lt script type  text javascript  charset  utf-8  src  http   datatables net release-datatables extras FixedColumns media js FixedColumns js  gt  lt  script gt    i don t see any other way of achieving this  Especially not by using css only   This is a lot to go through  Hope this helps

User · Answer

I recently had to create a solution with a fixed header group and a fixed first column  I split my table into div s and used jquery to capture window scrolling   http   jsfiddle net TinT EzXub 2346   var prevTop   0  var prevLeft   0     window  scroll function event     var currentTop     this  scrollTop      var currentLeft     this  scrollLeft       if prevLeft     currentLeft        prevLeft   currentLeft          header   css   left   -  this  scrollLeft           if prevTop     currentTop        prevTop   currentTop          leftCol   css   top   -  this  scrollTop     40

User · Answer

Another solution is to use AngularJS  The AngularUI module has a directive called ng-grid which supports a feature called column pinning  It is not 100  pure CSS but neither are the other solutions   http   angular-ui github io ng-grid  columnPinning

User · Answer

If you only want to use pure HTML and CSS i ve got a solution for your problem  In this jsFiddle you can see a non-script solution that provides a table with a fixed header  It shouldn t be a problem to adapt the markup for a fixed first column as well  You would just need to create a absolute-positioned table for the first column inside the hWrapper-div and reposition the vWrapper-div  Providing dynamic content should not be a problem using server-side or browser-side tempting-engines  my solution works well in all modern browsers and older browsers from IE8 onwards

User · Answer

To fix both Headers and Columns  you can use the following plugin    http   www fixedheadertable com      Updated in July 2019  Recently is emerged also a pure CSS solution that is based on CSS property position  sticky   here for more details about it  applied onto each TH item  instead of their parent container

User · Answer

All of these suggestions are great and all  but they re either only fixing either the header or a column  not both  or they re using javascript  The reason - it don t believe it can be done in pure CSS  The reason   If it were possible to do it  you would need to nest several scrollable divs one inside the other  each with a scroll in a different direction  Then you would need to split your table into three parts - the fixed header  the fixed column and the rest of the data    Fine  But now the problem - you can make one of them stay put when you scroll  but the other one is nested inside the scrolling area of first and is therefore subject to being scrolled out of sight itself  so can t be fixed in place on the screen   Ah-ha  you say  but I can somehow use absolute or fixed position to do that  - no you can t  As soon as you do that you lose the ability to scroll that container  It s a chicken and egg situation - you can t have both  they cancel each other out   I believe the only solution is through javascript  You need to completely seperate out the three elements and keep their positions in sync through javascript  There are good examples in other posts on this page  This one is also worth a look   http   tympanus net codrops 2014 01 09 sticky-table-headers-columns

User · Answer

Nowadays  this is possible to achieve using CSS only with position  sticky property   Here goes a snippet    jsFiddle  https   jsfiddle net hbqzdzdt 5     x000D   x000D   grid-container   x000D    display  grid     This is a  hacky  way to make the  grid element size to fit its content    x000D    overflow  auto  x000D    height  300px  x000D    width  600px  x000D    x000D   grid   x000D    display  flex  x000D    flex-wrap  nowrap  x000D    x000D   grid-col   x000D    width  150px  x000D    min-width  150px  x000D    x000D   x000D   grid-item--header   x000D    height  100px  x000D    min-height  100px  x000D    position  sticky  x000D    position  -webkit-sticky  x000D    background  white  x000D    top  0  x000D    x000D   x000D   grid-col--fixed-left   x000D    position  sticky  x000D    left  0  x000D    z-index  9998  x000D    background  white  x000D    x000D   grid-col--fixed-right   x000D    position  sticky  x000D    right  0  x000D    z-index  9998  x000D    background  white  x000D    x000D   x000D   grid-item   x000D    height  50px  x000D    border  1px solid gray  x000D    x000D   lt div class  grid-container  gt  x000D     lt div class  grid  gt  x000D       lt div class  grid-col grid-col--fixed-left  gt  x000D         lt div class  grid-item grid-item--header  gt  x000D           lt p gt HEAD lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt Hello lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt Hello lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt Hello lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt Hello lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt Hello lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt Hello lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt Hello lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt Hello lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt Hello lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt Hello lt  p gt  x000D         lt  div gt  x000D       lt  div gt  x000D   x000D       lt div class  grid-col  gt  x000D         lt div class  grid-item grid-item--header  gt  x000D           lt p gt HEAD lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt P lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt P lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt P lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt P lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt P lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt P lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt P lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt P lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt P lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt P lt  p gt  x000D         lt  div gt  x000D       lt  div gt  x000D   x000D       lt div class  grid-col  gt  x000D         lt div class  grid-item grid-item--header  gt  x000D           lt p gt HEAD lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt P lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt P lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt P lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt P lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt P lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt P lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt P lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt P lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt P lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt P lt  p gt  x000D         lt  div gt  x000D       lt  div gt  x000D   x000D       lt div class  grid-col  gt  x000D         lt div class  grid-item grid-item--header  gt  x000D           lt p gt HEAD lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt P lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt P lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt P lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt P lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt P lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt P lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt P lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt P lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt P lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt P lt  p gt  x000D         lt  div gt  x000D       lt  div gt  x000D   x000D       lt div class  grid-col  gt  x000D         lt div class  grid-item grid-item--header  gt  x000D           lt p gt HEAD lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt P lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt P lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt P lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt P lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt P lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt P lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt P lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt P lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt P lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt P lt  p gt  x000D         lt  div gt  x000D       lt  div gt  x000D   x000D       lt div class  grid-col  gt  x000D         lt div class  grid-item grid-item--header  gt  x000D           lt p gt HEAD lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt P lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt P lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt P lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt P lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt P lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt P lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt P lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt P lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt P lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt P lt  p gt  x000D         lt  div gt  x000D       lt  div gt  x000D   x000D       lt div class  grid-col  gt  x000D         lt div class  grid-item grid-item--header  gt  x000D           lt p gt HEAD lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt P lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt P lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt P lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt P lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt P lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt P lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt P lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt P lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt P lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt P lt  p gt  x000D         lt  div gt  x000D       lt  div gt  x000D   x000D       lt div class  grid-col  gt  x000D         lt div class  grid-item grid-item--header  gt  x000D           lt p gt HEAD lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt P lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt P lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt P lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt P lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt P lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt P lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt P lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt P lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt P lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt P lt  p gt  x000D         lt  div gt  x000D       lt  div gt  x000D   x000D       lt div class  grid-col  gt  x000D         lt div class  grid-item grid-item--header  gt  x000D           lt p gt HEAD lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt P lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt P lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt P lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt P lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt P lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt P lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt P lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt P lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt P lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt P lt  p gt  x000D         lt  div gt  x000D       lt  div gt  x000D   x000D       lt div class  grid-col  gt  x000D         lt div class  grid-item grid-item--header  gt  x000D           lt p gt HEAD lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt P lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt P lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt P lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt P lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt P lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt P lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt P lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt P lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt P lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt P lt  p gt  x000D         lt  div gt  x000D       lt  div gt  x000D   x000D       lt div class  grid-col  gt  x000D         lt div class  grid-item grid-item--header  gt  x000D           lt p gt HEAD lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt P lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt P lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt P lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt P lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt P lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt P lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt P lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt P lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt P lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt P lt  p gt  x000D         lt  div gt  x000D       lt  div gt  x000D   x000D       lt div class  grid-col grid-col--fixed-right  gt  x000D         lt div class  grid-item grid-item--header  gt  x000D           lt p gt HEAD lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt 9 lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt 9 lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt 9 lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt 9 lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt 9 lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt 9 lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt 9 lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt 9 lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt 9 lt  p gt  x000D         lt  div gt  x000D         lt div class  grid-item  gt  x000D           lt p gt 9 lt  p gt  x000D         lt  div gt  x000D       lt  div gt  x000D   x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    Regarding compatibility  It works in all major browsers  but not in IE  There is a polyfill for position  sticky but I never tried it

User · Answer

I ve made some changes in in jsfiddle  This might be what you re trying to do      http   jsfiddle net C8Dtf 81    I have hardcoded the titles like so    lt table id  left table  class  freeze table  gt       lt tr class  tblTitle  gt            lt th gt Title 1 lt  th gt            lt th gt Title 2 lt  th gt       lt  tr gt   lt  table gt    And I added some styles as well    tblTitle     position absolute      top 0px      margin-bottom 30px      background lightblue    td  th      padding 5px      height 40px      width 40px      font-size 14px      Hope this is what you want

User · Answer

An actual pure CSS solution with a fixed header row and first column I had to create a table with both a fixed header and a fixed first column using pure CSS and none of the answers here were quite what I wanted  The position  sticky property supports both sticking to the top  as I ve seen it used the most  and to the side in modern versions of Chrome  Firefox  and Edge  This can be combined with a div that has the overflow  scroll property to give you a table with fixed headers that can be placed anywhere on your page  Place your table in a container   lt div class  quot container quot  gt     lt table gt  lt  table gt   lt  div gt   Use overflow  scroll on your container to enable scrolling  div container     overflow  scroll     As Dagmar pointed out in the comments  the container also requires a max-width and a max-height  Use position  sticky to have table cells stick to the edge and top  right  or left to choose which edge to stick to  thead th     position  -webkit-sticky     for Safari      position  sticky    top  0     tbody th     position  -webkit-sticky     for Safari      position  sticky    left  0     As MarredCheese mentioned in the comments  if your first column contains  lt td gt  elements instead of  lt th gt  elements  you can use tbody td first-child in your CSS instead of tbody th To have the header in the first column stick to the left  use  thead th first-child     left  0    z-index  1      x000D   x000D     Use overflow scroll on your container to enable scrolling      div     max-width  400px    max-height  150px    overflow  scroll         Use position  sticky to have it stick to the edge    and top  right  or left to choose which edge to stick to      thead th     position  -webkit-sticky     for Safari      position  sticky    top  0     tbody th     position  -webkit-sticky     for Safari      position  sticky    left  0         To have the header in the first column stick to the left      thead th first-child     left  0    z-index  2         Just to display it nicely      thead th     background   000    color   FFF       Ensure this stays above the emulated border right in tbody th          z-index  1     tbody th     background   FFF    border-right  1px solid  CCC       Browsers tend to drop borders on sticky elements  so we emulate the border-right using a box-shadow to ensure it stays       box-shadow  1px 0 0 0  ccc     table     border-collapse  collapse     td  th     padding  0 5em    x000D   lt div gt     lt table gt       lt thead gt         lt tr gt           lt th gt  lt  th gt           lt th gt headheadhead lt  th gt           lt th gt headheadhead lt  th gt           lt th gt headheadhead lt  th gt           lt th gt headheadhead lt  th gt           lt th gt headheadhead lt  th gt           lt th gt headheadhead lt  th gt           lt th gt headheadhead lt  th gt         lt  tr gt       lt  thead gt       lt tbody gt         lt tr gt           lt th gt head lt  th gt           lt td gt body lt  td gt           lt td gt body lt  td gt           lt td gt body lt  td gt           lt td gt body lt  td gt           lt td gt body lt  td gt           lt td gt body lt  td gt           lt td gt body lt  td gt         lt  tr gt         lt tr gt           lt th gt head lt  th gt           lt td gt body lt  td gt           lt td gt body lt  td gt           lt td gt body lt  td gt           lt td gt body lt  td gt           lt td gt body lt  td gt           lt td gt body lt  td gt           lt td gt body lt  td gt         lt  tr gt         lt tr gt           lt th gt head lt  th gt           lt td gt body lt  td gt           lt td gt body lt  td gt           lt td gt body lt  td gt           lt td gt body lt  td gt           lt td gt body lt  td gt           lt td gt body lt  td gt           lt td gt body lt  td gt         lt  tr gt         lt tr gt           lt th gt head lt  th gt           lt td gt body lt  td gt           lt td gt body lt  td gt           lt td gt body lt  td gt           lt td gt body lt  td gt           lt td gt body lt  td gt           lt td gt body lt  td gt           lt td gt body lt  td gt         lt  tr gt         lt tr gt           lt th gt head lt  th gt           lt td gt body lt  td gt           lt td gt body lt  td gt           lt td gt body lt  td gt           lt td gt body lt  td gt           lt td gt body lt  td gt           lt td gt body lt  td gt           lt td gt body lt  td gt         lt  tr gt         lt tr gt           lt th gt head lt  th gt           lt td gt body lt  td gt           lt td gt body lt  td gt           lt td gt body lt  td gt           lt td gt body lt  td gt           lt td gt body lt  td gt           lt td gt body lt  td gt           lt td gt body lt  td gt         lt  tr gt       lt  tbody gt     lt  table gt   lt  div gt  x000D   x000D   x000D   https   jsfiddle net qwubvg9m 1

User · Answer

Pure CSS Example   lt div id  quot cntnr quot  gt       lt div class  quot tableHeader quot  gt           lt table class  quot table-header table table-striped table-bordered quot  gt               lt thead gt                   lt tr gt                       lt th gt this lt  th gt                       lt th gt transmission lt  th gt                       lt th gt is lt  th gt                       lt th gt coming lt  th gt                       lt th gt to lt  th gt                       lt th gt you lt  th gt                   lt  tr gt               lt  thead gt               lt tbody gt                   lt tr gt                       lt td gt we ve got it    lt  td gt                       lt td gt alright you are go lt  td gt                       lt td gt uh  we see the Earth now lt  td gt                       lt td gt we ve got it    lt  td gt                       lt td gt alright you are go lt  td gt                       lt td gt uh  we see the Earth now lt  td gt                   lt  tr gt               lt  tbody gt           lt  table gt       lt  div gt         lt div class  quot tableBody quot  gt           lt table class  quot table-body table table-striped table-bordered quot  gt               lt thead gt                   lt tr gt                       lt th gt this lt  th gt                       lt th gt transmission lt  th gt                       lt th gt is lt  th gt                       lt th gt coming lt  th gt                       lt th gt to lt  th gt                       lt th gt you lt  th gt                   lt  tr gt               lt  thead gt               lt tbody gt                   lt tr gt                       lt td gt we ve got it    lt  td gt                       lt td gt alright you are go lt  td gt                       lt td gt uh  we see the Earth now lt  td gt                       lt td gt we ve got it    lt  td gt                       lt td gt alright you are go lt  td gt                       lt td gt uh  we see the Earth now lt  td gt                   lt  tr gt               lt  tbody gt           lt  table gt       lt  div gt    lt  div gt    cntnr       width  auto      height  200px      border  solid 1px  444      overflow  auto      tableHeader       position  fixed      height  40px      overflow  hidden      margin-right  18px      background  white      table-header tbody       height  0      visibility  hidden      table-body thead       height  0      visibility  hidden     http   jsfiddle net cCarlson L98m854d  Drawback  The fixed header structure logic is fairly dependent upon specific dimensions  so abstraction is probably not a viable option

User · Answer

I found an excellent solution by Paul O Brien for the issue and would like share the link  https   codepen io paulobrien pen LBrMxa  I removed style for footer   html     box-sizing  border-box         before    after     box-sizing  inherit     intro     max-width  1280px    margin  1em auto     table-scroll     position  relative    width 100     z-index  1    margin  auto    overflow  auto    height  350px     table-scroll table     width  100     min-width  1280px    margin  auto    border-collapse  separate    border-spacing  0     table-wrap     position  relative     table-scroll th   table-scroll td     padding  5px 10px    border  1px solid  000     table-scroll thead th     position  -webkit-sticky    position  sticky    top  0     th first-child     position  -webkit-sticky    position  sticky    left  0    z-index  2    background   ccc    thead th first-child     z-index  5

User · Answer

Position   sticky doesn t work for some elements like  thead  in chrome and other webkit browsers like safari   But it works fine with  th    x000D   x000D  body   x000D    background-color  rgba 0  255  200  0 1   x000D    x000D   x000D   intro   x000D    color  rgb 228  23  23   x000D    x000D   x000D   wrapper   x000D    overflow-y  scroll  x000D    height  300px  x000D    x000D   x000D   sticky   x000D    position  sticky  x000D    top  0  x000D    color  black  x000D    background-color  white  x000D    x000D   lt div class  container intro  gt  x000D     lt h1 gt Sticky Table Header lt  h1 gt  x000D     lt p gt Postion   sticky doesn t work for some elements like  thead  in chrome and other webkit browsers like safari   lt  p gt  x000D     lt p gt But it works fine with  th  lt  p gt  x000D   lt  div gt  x000D   lt div class  container wrapper  gt  x000D     lt table class  table table-striped  gt  x000D       lt thead gt  x000D         lt tr gt  x000D           lt th class  sticky  gt Firstname lt  th gt  x000D           lt th class  sticky  gt Lastname lt  th gt  x000D           lt th class  sticky  gt Email lt  th gt  x000D         lt  tr gt  x000D       lt  thead gt  x000D       lt tbody gt  x000D         lt tr gt  x000D           lt td gt James lt  td gt  x000D           lt td gt Vince lt  td gt  x000D           lt td gt james example com lt  td gt  x000D         lt  tr gt  x000D         lt tr gt  x000D           lt td gt Jonny lt  td gt  x000D           lt td gt Bairstow lt  td gt  x000D           lt td gt jonny example com lt  td gt  x000D         lt  tr gt  x000D         lt tr gt  x000D           lt td gt James lt  td gt  x000D           lt td gt Anderson lt  td gt  x000D           lt td gt james example com lt  td gt  x000D         lt  tr gt  x000D         lt tr gt  x000D           lt td gt Stuart lt  td gt  x000D           lt td gt Broad lt  td gt  x000D           lt td gt stuart example com lt  td gt  x000D         lt  tr gt  x000D         lt tr gt  x000D           lt td gt Eoin lt  td gt  x000D           lt td gt Morgan lt  td gt  x000D           lt td gt eoin example com lt  td gt  x000D         lt  tr gt  x000D         lt tr gt  x000D           lt td gt Joe lt  td gt  x000D           lt td gt Root lt  td gt  x000D           lt td gt joe example com lt  td gt  x000D         lt  tr gt  x000D         lt tr gt  x000D           lt td gt Chris lt  td gt  x000D           lt td gt Woakes lt  td gt  x000D           lt td gt chris example com lt  td gt  x000D         lt  tr gt  x000D         lt tr gt  x000D           lt td gt Liam lt  td gt  x000D           lt td gt PLunkett lt  td gt  x000D           lt td gt liam example com lt  td gt  x000D         lt  tr gt  x000D         lt tr gt  x000D           lt td gt Jason lt  td gt  x000D           lt td gt Roy lt  td gt  x000D           lt td gt jason example com lt  td gt  x000D         lt  tr gt  x000D         lt tr gt  x000D           lt td gt Alex lt  td gt  x000D           lt td gt Hales lt  td gt  x000D           lt td gt alex example com lt  td gt  x000D         lt  tr gt  x000D         lt tr gt  x000D           lt td gt Jos lt  td gt  x000D           lt td gt Buttler lt  td gt  x000D           lt td gt jos example com lt  td gt  x000D         lt  tr gt  x000D         lt tr gt  x000D           lt td gt Ben lt  td gt  x000D           lt td gt Stokes lt  td gt  x000D           lt td gt ben example com lt  td gt  x000D         lt  tr gt  x000D         lt tr gt  x000D           lt td gt Jofra lt  td gt  x000D           lt td gt Archer lt  td gt  x000D           lt td gt jofra example com lt  td gt  x000D         lt  tr gt  x000D         lt tr gt  x000D           lt td gt Mitchell lt  td gt  x000D           lt td gt Starc lt  td gt  x000D           lt td gt mitchell example com lt  td gt  x000D         lt  tr gt  x000D         lt tr gt  x000D           lt td gt Aaron lt  td gt  x000D           lt td gt Finch lt  td gt  x000D           lt td gt aaron example com lt  td gt  x000D         lt  tr gt  x000D         lt tr gt  x000D           lt td gt David lt  td gt  x000D           lt td gt Warner lt  td gt  x000D           lt td gt david example com lt  td gt  x000D         lt  tr gt  x000D         lt tr gt  x000D           lt td gt Steve lt  td gt  x000D           lt td gt Smith lt  td gt  x000D           lt td gt steve example com lt  td gt  x000D         lt  tr gt  x000D         lt tr gt  x000D           lt td gt Glenn lt  td gt  x000D           lt td gt Maxwell lt  td gt  x000D           lt td gt glenn example com lt  td gt  x000D         lt  tr gt  x000D         lt tr gt  x000D           lt td gt Marcus lt  td gt  x000D           lt td gt Stoinis lt  td gt  x000D           lt td gt marcus example com lt  td gt  x000D         lt  tr gt  x000D         lt tr gt  x000D           lt td gt Alex lt  td gt  x000D           lt td gt Carey lt  td gt  x000D           lt td gt alex example com lt  td gt  x000D         lt  tr gt  x000D         lt tr gt  x000D           lt td gt Nathan lt  td gt  x000D           lt td gt Coulter Nile lt  td gt  x000D           lt td gt nathan example com lt  td gt  x000D         lt  tr gt  x000D         lt tr gt  x000D           lt td gt Pat lt  td gt  x000D           lt td gt Cummins lt  td gt  x000D           lt td gt pat example com lt  td gt  x000D         lt  tr gt  x000D         lt tr gt  x000D           lt td gt Adam lt  td gt  x000D           lt td gt Zampa lt  td gt  x000D           lt td gt zampa example com lt  td gt  x000D         lt  tr gt  x000D       lt  tbody gt  x000D     lt  table gt  x000D   lt  div gt  x000D   x000D   x000D    Or visit my codepen example

[html] Table with fixed header and fixed column on pure css

Examples related to html

Examples related to css

Examples related to html-table

Examples related to markup

Examples related to fixed-header-tables