MediaWiki:Gadget-StickyTableHeaders.css: Unterschied zwischen den Versionen
Aus SchnuppTrupp
(Die Seite wurde neu angelegt: „/* keeps table headers stuck to the top of the window, useful for long tables where it normally scrolls offscreen KNOWN PROBLEMS - borders disappe…“) |
(kein Unterschied)
|
Aktuelle Version vom 12. Mai 2020, 21:41 Uhr
/* 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; } /* 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; }