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

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

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: enter image description here

HTML:

  <thead>
    <tr>
      <th class="nombre"><%= f.label :cost_center %></th>
      <th class="cabecera cc">Personal</th>
      <th class="cabecera cc">Dpto</th>
    </tr>
  </thead>
  <tbody>
    <% @cost_centers.each do |cc| %>
    <tr>
      <td class="nombre"><%= cc.nombre_corto %></td>
      <td class="cc"><%= cc.cacentrocoste %></td>
      <td class="cc"><%= cc.cacentrocoste_dpto %></td>
    </tr>
    <% end %>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3"><a href="#">Mostrar mas usuarios</a></td>
    </tr>
  </tfoot>
</table>

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

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

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

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

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

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

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

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

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

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

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

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:

<div class="container">
  <table></table>
</div>

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 <td> elements instead of <th> 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_

/* 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_

<div>
  <table>
    <thead>
      <tr>
        <th></th>
        <th>headheadhead</th>
        <th>headheadhead</th>
        <th>headheadhead</th>
        <th>headheadhead</th>
        <th>headheadhead</th>
        <th>headheadhead</th>
        <th>headheadhead</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>head</th>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
      </tr>
      <tr>
        <th>head</th>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
      </tr>
      <tr>
        <th>head</th>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
      </tr>
      <tr>
        <th>head</th>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
      </tr>
      <tr>
        <th>head</th>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
      </tr>
      <tr>
        <th>head</th>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
      </tr>
    </tbody>
  </table>
</div>

_x000D_

https://jsfiddle.net/qwubvg9m/1/

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

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

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

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

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

The answer is

Pure CSS Example:

An actual pure CSS solution with a fixed header row and first column

Examples related to html

Examples related to css

Examples related to html-table

Examples related to markup

Examples related to fixed-header-tables

Tags