HTML table with fixed (frozen) columns and headers

This is very peculiar. It appears that the problematic code is this line:

$('thead').css("left", -$("tbody").scrollLeft()); //fix the thead relative to the body scrolling

It looks like IE11 handles relative positioning of nested elements differently (than Chrome and other browsers). In this case, you are positioning thead with relative positioning with an offset. You are also positioning thead th (it’s children) with an offset and relative positioning. Chrome appears to be positioning thead relative to table, and then positioning th relative to thead. IE11, on the other hand, appears to be positioning thead relative to table, and then th just inherits that same positioning regardless of its own positioning.

A fix for this would be the following: on IE11, handle the positioning differently for thead. Instead of setting the positioning on the parent thead, set the positioning on the thead th elements. In that way, your first column will not be ‘forced’ to inherit thead‘s positioning (in IE).

$(document).ready(function() {
  var isIE11 = !!navigator.userAgent.match(/Trident.*rv\:11\./);
  var customScroller;
  if (isIE11)
    customScroller = function() {
      $('thead th').css("left", -$("tbody").scrollLeft()); //if using IE11, fix the th element 
    };
  else
    customScroller = function() {
      $('thead').css("left", -$("tbody").scrollLeft()); //if not using IE11, fix the thead element
    };

  $('tbody').scroll(function(e) { //detect a scroll event on the tbody
    /*
    Setting the thead left value to the negative valule of tbody.scrollLeft will make it track the movement
    of the tbody element. Setting an elements left value to that of the tbody.scrollLeft left makes it maintain             it's relative position at the left of the table.    
    */
    customScroller(); //fix the thead relative to the body scrolling
    $('thead th:nth-child(1)').css("left", $("tbody").scrollLeft());
//fix the first cell of the header
    $('tbody td:nth-child(1)').css("left", $("tbody").scrollLeft()); //fix the first column of tdbody
  });
});

Here is a full example with your code, showing different handlings based on the browser:

https://jsfiddle.net/8tx4xfhx/5/

Alsol, it would be nice to see if anyone has noticed this behavior before. It appears that IE11 handles nested relative positioning differently than other browsers. Is there a spec somewhere that defines what the standard should be? Should relative positioning be inherited like IE does it? Or should relative positioning always be relative to the parent? I would think the latter. But performance considerations must also be taken.