本文转自：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.