Sticky headers table
Source code at: https://github.com/jordisan/Sticky-headers-table
Guidelines:
- Simplicity and robustness
- Minimize dependencies
- Maximize browser compatibility
1. Pure HTML + CSS (position: sticky)
- No JavaScript required; very robust
- Adapts naturally to content
- Good SEO; fast; practical
- Not supported by older browsers
.purecss table.budget td:first-child,
.purecss th:first-child,
.purecss table.budget th {
position: -webkit-sticky;
position: sticky;
z-index: 100;
left: 0;
}
.purecss table.budget th {
z-index: 101;
top: 0;
}
| Market |
MIP name |
Start date |
End date |
Status |
Brief budget |
Brief budget in € |
Proposal in € |
Proposal file |
| PL |
TVN |
12-Nov-2018 |
25-Nov-2018 |
Approved |
247.082,00zl |
57.769,93€ |
57.769,93€ |
|
| PL |
TVP |
12-Nov-2018 |
25-Nov-2018 |
Approved |
218.862,00zl |
51.171,85€ |
51.171,85€ |
|
| PL |
TV Polsat |
12-Nov-2018 |
25-Nov-2018 |
Approved |
242.256,00zl |
56.641,57€ |
56.641,57€ |
|
| TW |
Zenith |
15-Nov-2018 |
28-Nov-2018 |
Approved |
5.194.504,00$ |
146.766,52€ |
146.766,52€ |
|
| CZ |
Active Media Praha |
1-Nov-2018 |
30-Nov-2018 |
Approved |
469.105,00Kč |
18.224,75€ |
18.231,12€ |
|
| AT |
Reichl und Partner GmbH |
1-Nov-2018 |
30-Nov-2018 |
Draft |
93.000,00€ |
93.000,00€ |
0€ |
|
| AT |
SevenVentures Austria GmbH |
1-Nov-2018 |
30-Nov-2018 |
Draft |
40.900,00€ |
40.900,00€ |
0€ |
|
| HU |
RTL Adconnect |
1-Nov-2018 |
30-Nov-2018 |
Approved |
5.701.743,00Ft |
17.577,90€ |
950.290,50€ |
|
| HU |
YEHO Ltd |
1-Nov-2018 |
30-Nov-2018 |
Sent |
2.391,00€ |
2.391,00€ |
0€ |
|
| FR |
My Media |
1-Nov-2018 |
30-Nov-2018 |
Approved |
0€ |
0€ |
0€ |
|
2. HTML + JS/ES6
- No jQuery required
- Requires ES6 support
function tableFixHead (e) {
const el = e.target,
sT = el.scrollTop,
sL = el.scrollLeft;
[...el.querySelectorAll("thead th")].forEach(th =>
th.style.transform = `translateY(${sT}px)`
);
[...el.querySelectorAll("td:first-child")].forEach(td =>
td.style.transform = `translateX(${sL}px)`
);
}
[...document.querySelectorAll(".withes6 .table-wrapper")].forEach(el =>
el.addEventListener("scroll", tableFixHead)
);
| Market |
MIP name |
Start date |
End date |
Status |
Brief budget |
Brief budget in € |
Proposal in € |
Proposal file |
| PL |
TVN |
12-Nov-2018 |
25-Nov-2018 |
Approved |
247.082,00zl |
57.769,93€ |
57.769,93€ |
|
| PL |
TVP |
12-Nov-2018 |
25-Nov-2018 |
Approved |
218.862,00zl |
51.171,85€ |
51.171,85€ |
|
| PL |
TV Polsat |
12-Nov-2018 |
25-Nov-2018 |
Approved |
242.256,00zl |
56.641,57€ |
56.641,57€ |
|
| TW |
Zenith |
15-Nov-2018 |
28-Nov-2018 |
Approved |
5.194.504,00$ |
146.766,52€ |
146.766,52€ |
|
| CZ |
Active Media Praha |
1-Nov-2018 |
30-Nov-2018 |
Approved |
469.105,00Kč |
18.224,75€ |
18.231,12€ |
|
| AT |
Reichl und Partner GmbH |
1-Nov-2018 |
30-Nov-2018 |
Draft |
93.000,00€ |
93.000,00€ |
0€ |
|
| AT |
SevenVentures Austria GmbH |
1-Nov-2018 |
30-Nov-2018 |
Draft |
40.900,00€ |
40.900,00€ |
0€ |
|
| HU |
RTL Adconnect |
1-Nov-2018 |
30-Nov-2018 |
Approved |
5.701.743,00Ft |
17.577,90€ |
950.290,50€ |
|
| HU |
YEHO Ltd |
1-Nov-2018 |
30-Nov-2018 |
Sent |
2.391,00€ |
2.391,00€ |
0€ |
|
| FR |
My Media |
1-Nov-2018 |
30-Nov-2018 |
Approved |
0€ |
0€ |
0€ |
|
3. HTML + JS/jQuery
- jQuery required
- Best support (even IE!)
var $wrapper = $('.withjquery .table-wrapper');
var $th = $wrapper.find('thead th');
var $td = $wrapper.find('td:first-child');
$wrapper.on('scroll', function() {
$th.css('transform', 'translateY('+ this.scrollTop +'px)');
$td.css('transform', 'translateX('+ this.scrollLeft +'px)');
});
| Market |
MIP name |
Start date |
End date |
Status |
Brief budget |
Brief budget in € |
Proposal in € |
Proposal file |
| PL |
TVN |
12-Nov-2018 |
25-Nov-2018 |
Approved |
247.082,00zl |
57.769,93€ |
57.769,93€ |
|
| PL |
TVP |
12-Nov-2018 |
25-Nov-2018 |
Approved |
218.862,00zl |
51.171,85€ |
51.171,85€ |
|
| PL |
TV Polsat |
12-Nov-2018 |
25-Nov-2018 |
Approved |
242.256,00zl |
56.641,57€ |
56.641,57€ |
|
| TW |
Zenith |
15-Nov-2018 |
28-Nov-2018 |
Approved |
5.194.504,00$ |
146.766,52€ |
146.766,52€ |
|
| CZ |
Active Media Praha |
1-Nov-2018 |
30-Nov-2018 |
Approved |
469.105,00Kč |
18.224,75€ |
18.231,12€ |
|
| AT |
Reichl und Partner GmbH |
1-Nov-2018 |
30-Nov-2018 |
Draft |
93.000,00€ |
93.000,00€ |
0€ |
|
| AT |
SevenVentures Austria GmbH |
1-Nov-2018 |
30-Nov-2018 |
Draft |
40.900,00€ |
40.900,00€ |
0€ |
|
| HU |
RTL Adconnect |
1-Nov-2018 |
30-Nov-2018 |
Approved |
5.701.743,00Ft |
17.577,90€ |
950.290,50€ |
|
| HU |
YEHO Ltd |
1-Nov-2018 |
30-Nov-2018 |
Sent |
2.391,00€ |
2.391,00€ |
0€ |
|
| FR |
My Media |
1-Nov-2018 |
30-Nov-2018 |
Approved |
0€ |
0€ |
0€ |
|