MediaWiki:Gadget-stickyTableHeaders.css

 1 /* keeps table headers stuck to the top of the window,
 2    useful for long tables where it normally scrolls offscreen
 3    
 4    KNOWN PROBLEMS
 5    - borders disappear due to browser implementation issue (https://bugs.webkit.org/show_bug.cgi?id=128486)
 6    - double-row headers only work as long as the first <tr> does not stretch its height, since MediaWiki doesn't support <thead>
 7    - Safari makes the th elements in <tfoot> scroll down along with the top, if they are made sticky. table > :not(tfoot) fixes this.
 8 
 9    USAGE
10    - sticky headers are opt-in using the "sticky-header" class (eg. {| class="wikitable sticky-header")
11    - IF using multiple rows of <th>, the first row must not exceed 2.3em in height.
12      - If it does, set a custom style="top: 2.4em;" (or something similar) on the second row of <th>
13    - To sticky intermediate headers, mark their table-row as |-class="sticky-header" as well.
14      - Note: This won't look good when the top header is 2 rows high, but the intermediate rows are 1 row high.
15    - don't add sticky headers to tables shorter than roughly 1000px - use your best judgement
16 */
17 
18 table.sticky-header > :not(tfoot) tr:first-child th,
19 table.sticky-header > :not(tfoot) tr:nth-child(2) th,
20 tr.sticky-header th {
21 	position: -webkit-sticky;
22 	position: sticky;
23 	height: 2.3em; /* taller contents will override */
24 	box-sizing: border-box;
25 	top: -1px; /* chrome has a see-through border? */
26 	border-bottom: 0;
27 	z-index: 1; /* kart maps overlap with the ths: [[Fairy_rings]] */
28 }
29 
30 /* Move the second row of sticky headers down exactly the height of a single-line th */
31 table.sticky-header > :not(tfoot) tr:nth-child(2) th {
32 	top: calc(2.3em - 1px);
33 }
34 
35 /* fake a bottom border - see known problems */
36 table.sticky-header > :not(tfoot) tr:first-child th::after,
37 table.sticky-header > :not(tfoot) tr:nth-child(2) th::after,
38 tr.sticky-header th::after {
39 	content: '';
40 	position: absolute;
41 	left: 0;
42 	bottom: -1px; /* merge into existing border */
43 	width: 100%;
44 	border-bottom: 1px solid var(--wikitable-border);
45 }
46 
47 /* dark mode border color */
48 .wgl-darkmode table.sticky-header tr:first-child th::after,
49 .wgl-darkmode table.sticky-header tr:nth-child(2) th::after,
50 .wgl-darkmode tr.sticky-header th::after {
51 	border-bottom-color: #172136;
52 }
53 
54 /* move down when sticky page header is enabled */
55 .wgl-stickyheader.action-view table.sticky-header tr:first-child th,
56 .wgl-stickyheader.action-view table.sticky-header tr:nth-child(2) th,
57 .wgl-stickyheader.action-view tr.sticky-header th {
58 	top: 2.5rem; /* height of sticky header in rem because of template/skin font adjustments */
59 }
60 
61 /* Move the second row of sticky headers down exactly the height of a single-line th */
62 .wgl-stickyheader.action-view table.sticky-header tr:nth-child(2) th {
63 	top: calc(2.5rem + 2.3em - 1px); /* 2.5rem on top of calc({height} + {top}) w.r.t. previous <th> styles. */
64 }