Estive lutando com esse problema de CSS a manhã toda, mas não consigo fazer nenhum progresso.

Basicamente, eu tenho uma tabela de rolagem horizontal para a qual usei Tabelas responsivas de Bootstrap e apenas removi a consulta de mídia para rolar horizontalmente em todos os tamanhos de tela. Estou usando a ng-repeat do Angular para fazer um loop sobre matrizes de dados e dados aplicáveis a esses títulos, e quero que a primeira coluna fique. Meu HTML é o seguinte:

<div id="table" class="table-responsive">
        <table class="table table-bordered">
          <tr>
            <th ng-repeat="header in tableHeaders" ng-show="header.show" ng-class="'column-' + $index">
          <a ng-click="sortThis(header.name, $index)">
            <span class="glyphicon glyphicon-chevron-down" aria-hidden="true" ng-show="sortParam !== header.name"></span>
            <span class="glyphicon glyphicon-chevron-" aria-hidden="true" ng-show="sortParam === header.name"></span>
          </a> {{header.name}} 
          <span ng-show="!$first">
            <a ng-click="toggleColumn(header, $index)">X</a>
          </span>
        </th>
      </tr>
      <tr ng-repeat="row in tableData track by $index">
        <td ng-repeat="point in row | orderObjectBy:tableSort track by $index" ng-show="point.show" ng-class="'column-' + $index">{{point.name}}</td>
      </tr>
    </table>
  </div>

Eu tenho a tabela rolando horizontalmente e quero congelar a primeira coluna. No momento, cada coluna tem sua própria classe, se isso ajudar. Alguma ideia?