MediaWiki:Gadget-StickyTableHeaders2.css

/* 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 :( */