MediaWiki:Gadget-stickyTableHeaders.css

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)
Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
Opera: Press Ctrl-F5.

/* 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;
}

body.skin-citizen .sticky-header:not(.lighttable) th, .sticky-header.lighttable > *:not(tfoot) th{
	top: 80px;
}

/* 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;
}