Фиксированный первый столбец с адаптивными таблицами 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>
У меня таблица прокручивается горизонтально, и я хочу заморозить первый столбец. Прямо сейчас, каждый столбец имеет свой собственный класс, если это помогает. Есть идеи?