MediaWiki:Gadget-stickyTableHeaders.css

Nota: dopo aver pubblicato, potrebbe essere necessario pulire la cache del proprio browser per vedere i cambiamenti.

Firefox / Safari: tieni premuto il tasto delle maiuscole Shift e fai clic su Ricarica, oppure premi Ctrl-F5 o Ctrl-R (⌘-R su Mac)
Google Chrome: premi Ctrl-Shift-R (⌘-Shift-R su un Mac)
Internet Explorer / Edge: tieni premuto il tasto Ctrl e fai clic su Aggiorna, oppure premi Ctrl-F5
Opera: premi 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)
   - double-row headers only work as long as the first <tr> does not stretch its height, since MediaWiki doesn't support <thead>
   - Safari makes the th elements in <tfoot> scroll down along with the top, if they are made sticky. table > :not(tfoot) fixes this.

   USAGE
   - sticky headers are opt-in using the "sticky-header" class (eg. {| class="wikitable sticky-header")
   - IF using multiple rows of <th>, the first row must not exceed 2.3em in height.
     - If it does, set a custom style="top: 2.4em;" (or something similar) on the second row of <th>
   - To sticky intermediate headers, mark their table-row as |-class="sticky-header" as well.
     - Note: This won't look good when the top header is 2 rows high, but the intermediate rows are 1 row high.
   - don't add sticky headers to tables shorter than roughly 1000px - use your best judgement
*/

table.sticky-header > :not(tfoot) tr:first-child th,
table.sticky-header > :not(tfoot) tr:nth-child(2) th,
table.sticky-header > :not(tfoot) tr:nth-child(3) th,
tr.sticky-header th {
	position: -webkit-sticky;
	position: sticky;
	height: 2.3em; /* taller contents will override */
	box-sizing: border-box;
	top: -1px; /* chrome has a see-through border? */
	border-bottom: 0;
	z-index: 1; /* prevent maps from covering sticky header */
}
/* Timeless */
@media (min-width: 851px) {
	.skin-timeless table.sticky-header > :not(tfoot) tr:first-child th,
	.skin-timeless table.sticky-header > :not(tfoot) tr:nth-child(2) th,
	.skin-timeless table.sticky-header > :not(tfoot) tr:nth-child(3) th,
	.skin-timeless tr.sticky-header th {
	top: 52px;
	}
}

/* Vector 2022 */
@media (min-width: 1001px) {
	.skin-vector-2022 table.sticky-header > :not(tfoot) tr:first-child th,
	.skin-vector-2022 table.sticky-header > :not(tfoot) tr:nth-child(2) th,
	.skin-vector-2022 table.sticky-header > :not(tfoot) tr:nth-child(3) th,
	.skin-vector-2022 tr.sticky-header th {
	top: 48px;
	}
}

/* Move the second row of sticky headers down exactly the height of a single-line th */
table.sticky-header > :not(tfoot) tr:nth-child(2) th {
	top: calc(2.3em - 1px); /* due to font-size: 0.9em on tables we need +2 px on top of the calc({height}+{top}) */
}

table.sticky-header > :not(tfoot) tr:nth-child(3) th {
	top: calc(4.6em - 1px); /* due to font-size: 0.9em on tables we need +2 px on top of the calc({height}+{top}) */
}

/* fake a bottom border - see known problems */
table.sticky-header > :not(tfoot) tr:first-child th::after,
table.sticky-header > :not(tfoot) tr:nth-child(2) th::after,
table.sticky-header > :not(tfoot) tr:nth-child(3) th::after,
tr.sticky-header th::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -1px; /* merge into existing border */
	width: 100%;
	border-bottom: 1px solid var(--wikitable-border);
}