使用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。