这是我发现的最可靠的解决方案.在我决定使用jQuery插件之前,我已经找了几个小时.
在我使用的插件版本中,我们可以将标题粘贴到可滚动的容器.
看看这个plunker用于ng表的用例:
在我使用的插件版本中,我们可以将标题粘贴到可滚动的容器.
看看这个plunker用于ng表的用例:
http://plnkr.co/edit/ypBaDHIfaJWapXVs3jcU?p=preview
使用Javascript
- app.directive('fixedTableHeaders',['$timeout',function($timeout) {
- return {
- restrict: 'A',link: function(scope,element,attrs) {
- $timeout(function() {
- var container = element.parentsUntil(attrs.fixedTableHeaders);
- element.stickyTableHeaders({ scrollableArea: container,"fixedOffset": 2 });
- },0);
- }
- }
- }]);
HTML
- <div id="scrollable-area">
- <table ng-table="tableParams" fixed-table-headers="scrollable-area">
- <tr ng-repeat="user in $data">
- <td data-title="'Name'">{{user.name}}</td>
- <td data-title="'Age'">{{user.age}}</td>
- </tr>
- </table>
- </div>
CSS
- #scrollable-area {
- height: 150px;
- overflow-y: scroll; /* <-- here is what is important*/
- }
- table {
- width: 100%;
- }
- thead {
- background: #fff;
- }