MediaWiki:Gadget-StickyTableHeaders.css

Hinweis: Leere nach dem Speichern den Browser-Cache, um die Änderungen sehen zu können.

• Firefox/Safari: Umschalttaste drücken und gleichzeitig Aktualisieren anklicken oder entweder Strg+F5 oder Strg+R (⌘+R auf dem Mac) drücken
• Google Chrome: Umschalttaste+Strg+R (⌘+Umschalttaste+R auf dem Mac) drücken
• Internet Explorer: Strg+F5 drücken oder Strg drücken und gleichzeitig Aktualisieren anklicken
• Opera: Extras → Internetspuren löschen … → Individuelle Auswahl → Den kompletten Cache löschen

/* keeps table headers stuck to the top of the window,
   useful for long tables where it normally scrolls offscreen
   
   KNOWN PROBLEMS
   - borders disappear due to browser implementation issue (https://bugs.webkit.org/show_bug.cgi?id=128486)
   - multi-row headers overlap each other since MediaWiki doesn't support <thead>
   - Chrome/Opera/Edge don't support sticky on <thead> anyway (https://caniuse.com/#feat=css-sticky)

   USAGE
   - sticky headers are opt-in using the "sticky-header" class (eg. {| class="wikitable sticky-header")
   - don't add sticky headers to tables with multiple rows of headers
   - don't add sticky headers to tables shorter than roughly 1000px - use your best judgement
   - don't add sticky headers to tables that have captions (marked with |+)
*/

.sticky-header:not(.lighttable) th,
.sticky-header.lighttable > *:not(tfoot) th {
	position: -webkit-sticky;
	position: sticky;
	top: -1px; /* chrome has a see-through border? */
	border-bottom: 1px solid transparent;
}

/* fake a bottom border - see known problems */
.sticky-header:not(.lighttable) th::after,
.sticky-header.lighttable > *:not(tfoot) th::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	border-bottom: 1px solid #dcdcdc;
}

/* dark mode border color */
.wgl-darkmode .sticky-header:not(.lighttable) th::after,
.wgl-darkmode .sticky-header.lighttable > *:not(tfoot) th::after {
	border-bottom-color: #172136;
}

/* move down when sticky page header is enabled */
.wgl-stickyheader.action-view .sticky-header:not(.lighttable) th,
.wgl-stickyheader.action-view .sticky-header.lighttable > *:not(tfoot) th {
	top: 3em;
}