Фиксированный первый столбец с адаптивными таблицами Bootstrap и AngularJS

Я боролся с этой проблемой CSS все утро, но, похоже, не могу добиться никакого прогресса.

По сути, у меня есть таблица горизонтальной прокрутки, для которой я использовал адаптивные таблицы Bootstrap, и просто удалил медиа-запрос, чтобы он прокручивался горизонтально на всех экранах. Я использую ng-repeat в Angular для циклического перебора массивов заголовков и данных, применяемых к этим заголовкам, и хочу, чтобы первый столбец прикреплялся. Мой HTML выглядит следующим образом:

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

У меня таблица прокручивается горизонтально, и я хочу заморозить первый столбец. Прямо сейчас, каждый столбец имеет свой собственный класс, если это помогает. Есть идеи?

Ответы на вопрос(1)

Ваш ответ на вопрос