User:TheDJ/StickyTableHeaders.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 */

/* On mobile, where we have tables in overflowable boxes to avoid viewport overflows, * by using display:block, sticky never works though :( */ @supports (-webkit-hyphens:none) { 	.jquery-tablesorter > thead,	.mw-sticky-header > thead {	   position: -webkit-sticky;	    position: sticky;	    top: 0;	}	/* This does not seem to work, possibly due to the absolute/relative hacking mess of timeless */	@media screen and (max-width: 1099px) and (min-width: 851px) {		.skin-timeless .jquery-tablesorter > thead,		.skin-timeless .mw-sticky-header > thead {			top: 3.125em;		}	}	@media screen and (min-width: 1100px) {		.skin-timeless .jquery-tablesorter > thead,		.skin-timeless .mw-sticky-header > thead {			top: 6em;		}	}	.jquery-tablesorter > tfoot,	.mw-sticky-header > tfoot {	    position: -webkit-sticky;	    position: sticky;	    bottom: 0;	} }

/* On all browsers but Safari, we use th fixed positioning, * because they do not support it for tr or thead */ @supports (not (-webkit-hyphens:none)) { /* based on https://css-tricks.com/position-sticky-and-table-headers/ * refined by Dinoguy1000 */ table.mw-sticky-header { position: relative; border-collapse: separate; border-spacing: 0; }	.mw-sticky-header th[scope="col"] { position: sticky; top: 0; }	/* this is stupidly fragile, but it works... feel free to suggest better versions, though */ .mw-sticky-header tr:nth-child(2) th[scope="col"] { top: 29px; }	/* position:sticky does weird things to cell borders, so we have to reset them here */ .wikitable.mw-sticky-header th, .wikitable.mw-sticky-header td { border-style: none solid solid none; }	/* the reset creates a double-thick border on the bottom and right edges of the table (only in Firefox?), so remove it here */ .wikitable.mw-sticky-header tr:last-child th, .wikitable.mw-sticky-header tr:last-child td { border-bottom-style: none; }	/* ...and *that* reset removes the bottom border of the header row on tables with a single header row, so remove *it* */ .wikitable.mw-sticky-header thead tr:last-child th, .wikitable.mw-sticky-header thead tr:last-child td { border-bottom-style: solid; }	.wikitable.mw-sticky-header th:last-child, .wikitable.mw-sticky-header td:last-child { border-right-style: none; }	/* fix borders in Edge (sometimes - see https://css-tricks.com/position-sticky-and-table-headers/#comment-1749745 ) */ @supports (-ms-ime-align: auto) { background-clip: padding-box; } }