Table with fixed col and row headers (prototype)

index.html

table
  thead
    tr
      th.blank
      - for (c=0;c<20;c++) {
        th='col ' + c
      - }      
  tbody
    - for (r=0;r<30;r++) {
      tr
        th= 'row '+r 
        - for (c=0;c<20;c++) {
          td='(' + c + ', ' + r + ')'
        - }      
    - }    

script.js

$(function(){
  function repositionFixedHeaders() {
    var $hCol=$('tbody th');
    var $hRow=$('thead');
    var $table=$('table');
    var offsetTop = $('body').scrollTop();
    var offsetLeft = $('body').scrollLeft();
    
    requestAnimationFrame(repositionFixedHeaders);
    
    // move fixed header row
    $hRow.css('left',-offsetLeft);
    
    // move fixed header column
    $hCol.each(function() {  
      var vertOffset = $(this).parent().offset().top;
      $(this).css('top',vertOffset-offsetTop);
    });
    
    // indicate horizontal scroll
    if (offsetLeft > 0) {
      if (!$table.hasClass('moreLeft')) {
        $table.addClass('moreLeft');
      }
    } else {
      $table.removeClass('moreLeft');
    }
    
    // indicate vert scroll
    if (offsetTop > 0) {
      if (!$table.hasClass('moreTop')) {
        $table.addClass('moreTop');
      }
    } else {
      $table.removeClass('moreTop');
    }    
        
  }
  
  repositionFixedHeaders();
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

* {
  box-sizing:border-box;
}

html,
body {
  height:100%;
}


table {
  display:block;
  position:relative;
  
  &:after,
  &:before {
    content:'';
    display:block;
    position:fixed;
    z-index:2000;
    top:0;
    left:0;
    transition:box-shadow 250ms ease-out;
  }

  &.moreLeft:after {
    box-shadow:4px 0 14px rgba(0,0,0,0.2);
    height:100%;
    width:150px;
  }

  &.moreTop:before {
    box-shadow:0 4px 14px rgba(0,0,0,0.2);
    height:40px;
    width:100%;
  }

  tr {
    display:flex;
    flex-direction: row;
    flex-wrap:nowrap;
    justify-content:flex-start;
  }
  td,
  th {
    display:flex;
    flex:1 0 150px;
    padding:10px;
    text-align:center;
    border:1px solid #ccc;
    background:#fff;
    width:150px;
  }
  tbody {
    margin-top:40px;
    margin-left:150px;
    position:relative;
    z-index:100;
    th {
      backface-visibility: hidden;
      position:fixed;
      z-index:80;
      left:0;
    }
  }
  thead {
    backface-visibility: hidden;
    position:fixed;
    z-index:200;
    top:0;
    margin-left:150px;
    th {
      height:40px;
      z-index:100;
      
      &.blank {
        backface-visibility: hidden;
        position:fixed;
        z-index:200;
        top:0;
        left:0;
      }
    }
  }
}

Table with fixed col and row headers (prototype).markdown

Table with fixed col and row headers (prototype)

Limited browser support, fixed size cells. I hope to make something more flexible.

A Pen by Ryan Niswonger on CodePen.

License.