角+引導：表設計

Question

我有幾個特點麻煩我想要實現：

• 我希望有一個固定的表頭，所以我可以向下滾動，同時仍然能夠看到頭，我去通過數據。
• 我希望我的表格的尺寸儘可能大=>不溢出-x
• 我的列可以來自不同的尺寸，但標頭必須對齊。
• 我的< td>必須限制最大高度，並在td內添加一個滾動條。

這些甚至可能嗎？因爲我嘗試了幾種解決方案inconclusives =（

如果我從表中分離出來的頭，它會弄亂寬度的列標題的。

.test { 
    overflow-x: visible; 
    overflow-y: auto; 
} 

如果您正在使用的上溢可見。-x或溢出-Y和比其他可見光以外的某種可見的值被解釋爲自動

而這將無法正常工作。

• Fixed header table in AngularJS
• Twitter bootstrap scrollable table
• http://www.fixedheadertable.com/

編輯@Merijn DK：

<!-- html --> 
<table class="table table-striped table-bordered"> 
    <thead> 
     <tr> 
      <th ng-repeat="column in columns" ng-show="column.show" ng-style="column.style"> 
       {{ column.label }} 
      </th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr ng-repeat="item in results"> 
      <td ng-repeat="column in columns" ng-show="column.show" ng-style="column.style" ng-bind-html="item.data | unsafe"> 
      </td> 
     </tr> 
    </tbody> 
</table> 

//Javascript 
.filter('unsafe', function($sce, $rootScope) { 
    return function(html) { 
     return $sce.trustAsHtml(html); 
    }; 
}); 

Answer 1

只是找到了一個不錯的插件，允許浮動或以各種方式固定theads。 Just look at the awesome demos here

現在你需要實現角度。我做了一個非常快的和不完善的指令，它可以改善很多：（媒體鏈接通過@spades自己提高，THX爲是真棒！）

plunker.directive('thead', function() { 
    return { 
    restrict: 'A', 
    scope: { 
     ngModel: '=' 
    }, 
    link: function(scope, elem) { 
     window.onscroll = function() { 
      elem.floatThead({ 
       scrollingTop: 45, 
      }); 
      elem.floatThead('reflow'); 
     } 
    } 
    }; 
}) 

您可以通過這裏加入他們試訓的各種選項：

elem.floatThead(additionaloptions); 

只需添加指令你的HTML：

<table thead> 
    <thead> 
     <tr> 
     <th>a</th> 
     <th>b</th> 
     <th>c</th> 
     <th>d</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
     <td>111</td> 
     <td>111</td> 
     <td>111</td> 
     <td>111</td> 
     </tr> ... 

找到一個完整plunker（帶有示例的窗口滾動）here（當然這也可能發生，我請注意，您應該在新窗口（右上角的藍色x）中打開預覽，並調整其高度，直到滾動條出現爲止。