Eu tive muita sorte aplicando uma transformação css no scroll para ter um cabeçalho de tabela fixo. Mas agora eu gostaria de tentar a mesma técnica ao rolar horizontalmente para ter colunas fixadas.

O problema que eu estou enfrentando é que as colunas fixadas no cabeçalho aparecem atrás e não no topo ao rolar horizontalmente. O navegador está decidindo quais elementos DOM devem estar no topo depois de fazer a transformação. Alguma coisa que eu possa fazer para controlar isso? (sim, eu tentei o z-index)

Demo

(function() {
  var app = angular.module("soDemo", []);
  app.controller("soDemoController", SoDemoController);

  SoDemoController.$inject = ['$scope', '$document'];

  function SoDemoController($scope, $document) {
    var vm = {
      data: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
    };

    $scope.vm = vm;
    $('.table-container').on('scroll', onScroll);

    return;

    /////////// IMPLEMENATION ////////
    function onScroll() {
      var translate = "translate(0," + this.scrollTop + "px)";
      $("table thead th:not(.pinned)").css('transform', translate);

      translate = "translate(" + this.scrollLeft + "px,0)";
      $("table tbody .pinned").css('transform', translate);

      translate = "translate(" + this.scrollLeft + "px," + this.scrollTop + "px)";
      $("table thead th.pinned").css('transform', translate);
    }
  }
})();

.table-container {
  overflow: auto;
  height: 200px;
  width: 300px
}

table {
  table-layout: fixed;
  border-spacing: 0;
}

td {
  padding: 3px;
  white-space: nowrap;
  border-right: 1px solid #ccc;
}

th {
  background: #999;
}

th.pinned {
  background: #ccc;
}

td.pinned {
  background: #eee;
}

input {
  margin-top: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>

<div class="sample" ng-app="soDemo" ng-controller="soDemoController">
  <p>When you scroll horizontally, the header row scrolls on top of col0 and col1 instead of behind it.</p>
  <p>When you scroll vertically, the tbody cells render over top of Col 0 and Col 1 headers instead of behind it</p>
  <div class="table-container">
    <table>
      <thead>
        <tr>
          <th class="pinned">Col 0</th>
          <th class="pinned">Col 1</th>
          <th>Col 2</th>
          <th>Col 3</th>
          <th>Col 4</th>
          <th>Col 5</th>
          <th>Col 6</th>
          <th>Col 7</th>
          <th>Col 8</th>
          <th>Col 9</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="item in vm.data">
          <td class="pinned">Data {{item}}</td>
          <td class="pinned">Data {{item}}</td>
          <td>Data {{item}}</td>
          <td>Data {{item}}</td>
          <td>Data {{item}}</td>
          <td>Data {{item}}</td>
          <td>Data {{item}}</td>
          <td>Data {{item}}</td>
          <td>Data {{item}}</td>
          <td>Data {{item}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>