使用Bootstrap响应式表格和AngularJS修复了第一列

Question

我一直在努力解决CSS问题，但我似乎无法取得任何进展。

基本上，我有一个水平滚动表，我使用了Bootstrap响应表，并且只是移除了媒体查询，以便在所有屏幕尺寸下水平滚动。我正在使用Angular的ng-repeat来遍历应用于这些标题的标题和数据数组，并且我希望第一列能够被粘住。我的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> 

我有水平滚动的表，我想冻结第一列。现在，如果有帮助的话，每一列都有自己的类。有任何想法吗？

Answer 1

这里有一个指导你：

/* 
This directive will fix the first column in place and will use `overflow-x:auto` for the subsequent columns. 

Example use: 

``` 
<div fixed-first-column> 
    <table class="table"> 
     <tbody> 
      <tr> 
       <td><div>Row 1</div></td> 
       <td>Value 1</td> 
       <td>Value 2</td> 
      </tr> 
      <tr> 
       <td><div>Row 2</div></td> 
       <td>Value 1</td> 
       <td>Value 2</td> 
      </tr> 
     </tbody> 
    </table> 
</div> 
``` 
*/ 
app.ng.directive("fixedFirstColumn", [function() { 
    return { 
     restrict: "A", 
     template: "<div class='table-responsive'><div ng-transclude></div></div>", 
     transclude: true, 
     link: function ($scope, $element) { 
      var interval = setInterval(function() { 
       var tr = $element.find("tr"); 

       angular.forEach(tr, function (i) { 
        var columns = angular.element(i).children(); 

        if (columns.length < 1) { 
         // Row with no columns? Ignore it. 
         return; 
        } 

        var column0 = angular.element(columns[0]).children()[0] || columns[0]; 
        var column1 = columns[1]; 

        // Calculate heights of each <td>. 
        var height0 = (column0).offsetHeight; 
        var height1 = column1 ? column1.offsetHeight : 0; 

        // Calculate final height. 
        var height = Math.max(height0, height1); 

        // Set heights of <td> and <tr>. 
        columns[0].style.height = height + "px"; 
        i.style.height = height + "px"; 

        if (column1) { 
         column1.style.height = height + "px"; 
        } 

        // If <td> heights have stabilized. 
        if (height0 !== 0 && height0 === height1) { 
         clearInterval(interval); 
        } 
       }); 
      }, 1000); 
     } 
    }; 
}]); 

的演示中看到the JsFiddle。