本文转自：http://pointblankdevelopment.com.au/blog/angularjs-fixed-header-scrollable-table-directive
This post contains a custom AngularJS directive you can use to give your html table a fixed header and footer with a scrollable body, we developed it for a law firm marketing website recently, it uses a pure CSS approach and doesn't touch any of the html tags, leaving the html table completely intact and happily semantic :)
Creating a fixed header scrollable table using purely CSS turns out to be a surprisingly tricky thing to do, in an ideal world I thought it would just be a matter of setting the height of the table body and "overflow:hidden", but there turns out to be a bit more to it than that, especially if you have a table that contains dynamic content because the width of each column in the thead and tbody need to be set in order for it to continue looking like a table and not just a big mess.
In a nutshell the CSS changes that need to happen are:
- Set the width of each column in the thead and tbody, making sure they match up so the columns aren't wonky
- Set the thead and tbody to "display:block;"
- Set the tbody height and "overflow:auto;" to add the scrollbar
- When there's a scrollbar (when the tbody content overflows it's height), reduce the width of the final column in the tbody by the width of the scrollbar
Here's the solution I came up with:
- Install using Bower:
bower install angu-fixed-header-table - See on Plunker at http://plnkr.co/edit/YIohJ7?p=preview)
- Available on GitHub at https://github.com/cornflourblue/angu-fixed-header-table
The fixedHeader AngularJS directive
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
|
/** * AngularJS fixed header scrollable table directive * @author Jason Watmore <jason@pointblankdevelopment.com.au> (http://jasonwatmore.com) * @version 1.2.0 */(function () { angular .module('anguFixedHeaderTable', []) .directive('fixedHeader', fixedHeader); fixedHeader.$inject = ['$timeout']; function fixedHeader($timeout) { return { restrict: 'A', link: link }; function link($scope, $elem, $attrs, $ctrl) { var elem = $elem[0]; // wait for data to load and then transform the table $scope.$watch(tableDataLoaded, function(isTableDataLoaded) { if (isTableDataLoaded) { transformTable(); } }); function tableDataLoaded() { // first cell in the tbody exists when data is loaded but doesn't have a width // until after the table is transformed var firstCell = elem.querySelector('tbody tr:first-child td:first-child'); return firstCell && !firstCell.style.width; } function transformTable() { // reset display styles so column widths are correct when measured below angular.element(elem.querySelectorAll('thead, tbody, tfoot')).css('display', ''); // wrap in $timeout to give table a chance to finish rendering $timeout(function () { // set widths of columns angular.forEach(elem.querySelectorAll('tr:first-child th'), function (thElem, i) { var tdElems = elem.querySelector('tbody tr:first-child td:nth-child(' + (i + 1) + ')'); var tfElems = elem.querySelector('tfoot tr:first-child td:nth-child(' + (i + 1) + ')'); var columnWidth = tdElems ? tdElems.offsetWidth : thElem.offsetWidth; if (tdElems) { tdElems.style.width = columnWidth + 'px'; } if (thElem) { thElem.style.width = columnWidth + 'px'; } if (tfElems) { tfElems.style.width = columnWidth + 'px'; } }); // set css styles on thead and tbody angular.element(elem.querySelectorAll('thead, tfoot')).css('display', 'block'); angular.element(elem.querySelectorAll('tbody')).css({ 'display': 'block', 'height': $attrs.tableHeight || 'inherit', 'overflow': 'auto' }); // reduce width of last column by width of scrollbar var tbody = elem.querySelector('tbody'); var scrollBarWidth = tbody.offsetWidth - tbody.clientWidth; if (scrollBarWidth > 0) { // for some reason trimming the width by 2px lines everything up better scrollBarWidth -= 2; var lastColumn = elem.querySelector('tbody tr:first-child td:last-child'); lastColumn.style.width = (lastColumn.offsetWidth - scrollBarWidth) + 'px'; } }); } } }})(); |
Sample HTML that uses the fixed-header directive
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<table class="table table-bordered" fixed-header> <thead> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> <th>Header 4</th> </tr> </thead> <tbody> <tr ng-repeat="item in [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]"> <td>Row {{item}} Col 1</td> <td>Row {{item}} Col 2</td> <td>Row {{item}} Col 3</td> <td>Row {{item}} Col 4</td> </tr> </tbody> <tfoot> <tr> <td>Footer 1</td> <td>Footer 2</td> <td>Footer 3</td> <td>Footer 4</td> </tr> </tfoot></table> |
The default height of the table body is 400px, to change this add a table-height attribute to the table element eg: table-height="500px".
UPDATE 08/10/2014: Added support for fixed footer (tfoot) element.