Ich habe den ganzen Morgen mit diesem CSS-Problem zu kämpfen, aber ich kann anscheinend keine Fortschritte machen.

Grundsätzlich habe ich eine horizontal scrollende Tabelle, für die ich Bootstrap Responsive Tables verwendet habe, und die Medienabfrage soeben entfernt, dass sie bei allen Bildschirmgrößen horizontal scrollt. Ich benutze Angulars ng-repeat, um Arrays von Überschriften und Daten, die auf diese Überschriften zutreffen, zu durchlaufen, und ich möchte, dass die erste Spalte erhalten bleibt. Mein HTML lautet wie folgt:

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

Ich habe die Tabelle horizontal gescrollt, und ich möchte die erste Spalte einfrieren. Im Moment hat jede Spalte ihre eigene Klasse, wenn das hilft. Irgendwelche Ideen