MediaWiki:Gadget-stickyTableHeaders.css
Revision as of 08:27, 16 February 2022 by Soulgazer (talk | contribs) (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> - Chrome/Opera/Edge don't support sticky on <thead> anyway (https://caniuse.com/#feat=css-sticky...")
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) - double-row headers only work as long as the first <tr> does not stretch its height, since MediaWiki doesn't support <thead> - Chrome/Opera/Edge don't support sticky on <thead> anyway (https://caniuse.com/#feat=css-sticky) - 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, 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 ths: [[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); /* 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, tr.sticky-header th::after { content: ''; position: absolute; left: 0; bottom: -1px; /* merge into existing border */ width: 100%; border-bottom: 1px solid #dcdcdc; } /* dark mode border color */ .wgl-darkmode table.sticky-header tr:first-child th::after, .wgl-darkmode table.sticky-header tr:nth-child(2) th::after, .wgl-darkmode tr.sticky-header th::after { border-bottom-color: #172136; } /* 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: 3em; } /* 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(3em + 2.3em - 1px); /* 3em on top of calc({height} + {top}) w.r.t. previous <th> styles. */ }