Alex: Created page with "/* 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 does not stretch its height, since MediaWiki doesn't support - Safari makes the th elements in scroll down along with the top, if they are made stick..."

2024-10-13T00:51:56Z

Created page with "/* 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 stick..."

New page

/* 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.
- Our code editor on the wiki apparently seems to think :not() selectors are not allowed to have complex selectors, so it throws an error.
This is incorrect (see https://developer.mozilla.org/en-US/docs/Web/CSS/:not and https://jigsaw.w3.org/css-validator/validator), so this error
can safely be ignored.

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):not(thead + tbody) tr:first-child th, /* Ignore the error here. :not(thead + tbody) is fully valid CSS.*/
table.sticky-header > :not(tfoot):not(thead + tbody) tr:nth-child(2) 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; /* kart maps overlap with the <th>s: [[Fairy_rings]] */
}

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

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

/* move down when sticky page header is enabled */
.wgl-stickyheader.action-view table.sticky-header tr:first-child th,
.wgl-stickyheader.action-view table.sticky-header tr:nth-child(2) th,
.wgl-stickyheader.action-view tr.sticky-header th {
top: 2.5rem; /* height of sticky header in rem because of template/skin font adjustments */
}

/* Move the second row of sticky headers down exactly the height of a single-line th */
.wgl-stickyheader.action-view table.sticky-header tr:nth-child(2) th {
top: calc(2.5rem + 2.3em - 1px); /* 2.5rem on top of calc({height} + {top}) w.r.t. previous <th> styles. */
}

MediaWiki:Gadget-stickyTableHeaders.css - Revision history