MediaWiki:Gadget-StickyTableHeaders2.css
From EverybodyWiki Bios & Wiki
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* sortable tables and JS enhanced wikitables with thead, works with Safari. This is ideal. */
/* But borders are broken: https://bugs.webkit.org/show_bug.cgi?id=128486 */
.jquery-tablesorter > thead,
.jquery-tablesorter > tfoot,
.mw-sticky-header > thead,
.mw-sticky-header > tfoot {
position: -webkit-sticky;
position: sticky;
}
/* wikitables don't have thead's, we need to guess which th's are part of the header in all browsers.
* This is in for backwards compatibility if JS enhanced wikitables (.mw-stick-header) isn't on */
.wikitable:not(.sortable) > tbody > tr:first-child,
.wikitable:not(.sortable) > tbody > tr:last-child {
position: -webkit-sticky;
position: sticky;
}
.jquery-tablesorter > thead,
.mw-sticky-header > thead {
top: 0;
}
/* Take into account the border of the table and the th elements
* (both 1px, then collapsed, but chrome makes that 2px uncollapsed ?) */
.wikitable:not(.sortable) > tbody > tr:first-child {
top: -1px
}
.jquery-tablesorter > tfoot,
.mw-sticky-header > tfoot,
.wikitable:not(.sortable) > tbody > tr:last-child {
bottom: 0;
}
/* On mobile, where we have tables in overflowable boxes to avoid viewport overflows,
* by using display:block, sticky never works though :( */
