/** * {{pp-template}} * * Use on large tables so column and/or row headers are sticky while scrolling. * Especially useful on small devices (mobile). For Safari, v13+ required. * * .covid19-container: Div class contains all other classes and content. * * .scroll-container: Div class makes its content scrollable. * * .plainrowheadersbg: Table class makes row headers' background color plain. * * .sortunder: Table class moves "sortable" buttons below column header text. * Note: If table w/ sticky column and row headers uses "sortunder", add inline * "padding-bottom: 1em;" style to sort row's headers to fix borders missing * between random row headers on Windows Chrome and Edge (Chromium). * * .sticky-row: (use once) Row class makes top-sticky while scrolling. Use * instead of "sticky-row1" and "sticky-row2". * * .sticky-row1 | .sticky-row2: (use both once) Row classes make top-sticky * while scrolling. First restricts height/nowrap and second sticks under first. * Use instead of "sticky-row". * * .sticky-col1 | .sticky-col2: (use one) Table class makes first or second * column respectively left-sticky while scrolling. * * .expand | .collapse: (use both) Div class for expand/collapse behavior to * remove/add respectively height and scrollbar restrictions on * "scroll-container" div. Add a unique "id" to the "covid19-container" div * (e.g. "unique-id") and also add to "href" of expand link (e.g. "#unique-id"). * <div class="covid19-container" id="unique-id"> * {{navbar|{{subst:PAGENAME}}|brackets=1|mini=1}} * <div class="expand" title="Unrestricted table height">[[#unique-id|[expand]]]</div> * <div class="collapse" title="Restricted table height">[[#0|[collapse]]]</div> * <div class="scroll-container"> * <!-- table goes here --> * </div> * </div> * * Notes: * - Expand disables sticky and scroll behaviors. * - Firefox sticky with collapsed borders work different than other browsers. *//** * Add margin similar to "wikitable". */.covid19-container {margin-bottom: 1em;margin-top: 1em;}/** * Inherit background color from table. "plainrowheadersbg" adjusts row headers. * "wikitable" styles other <th>. */.covid19-container thead, /* sortable: column headers and (after sort) sorttop */.covid19-container tbody,.covid19-container tfoot, /* sortable: (after sort) sortbottom */.covid19-container tr,.covid19-container td,.covid19-container .plainrowheadersbg th[scope=row],.covid19-container .plainrowheadersbg th[scope=rowgroup],.covid19-container table:not(.wikitable) th {background-color: inherit;}/** * Fix short centered caption hidden on collapsed wide table. */.covid19-container caption {text-align: left;}@media screen {/** * Behavior for scroll. */.covid19-container .scroll-container {max-height: 75vh;max-width: max-content; /* Move vertical scroll next to div */min-width: 300px; /* In case another element floats right */overflow-y: auto;}/** * Row class is top-sticky; one "sticky-row" or both "sticky-row1" and * "sticky-row2". Latter sticks second under first with first height/nowrap * restriction. Don't use on row that spans or is spanned by another row * (rowspan). "sortable" moves column headers and (after sort) "sorttop" to * <thead>. Because "sorttop" moved, don't make <thead> sticky. Some tables * may be using <td> instead of <th>. */.covid19-container tr.sticky-row > *,.covid19-container .static-row-numbers.wikitable tr.sticky-row::before {position: sticky;top: -1px;z-index: 10;}.covid19-container tr.sticky-row1 > *,.covid19-container .static-row-numbers.wikitable tr.sticky-row1::before {height: 1.61em;position: sticky;top: -1px;white-space: nowrap;z-index: 10;}.covid19-container tr.sticky-row2 > *,.covid19-container .static-row-numbers.wikitable tr.sticky-row2::before {position: sticky;top: 2.02em;z-index: 10;}/** * Table with "sticky-col1" or "sticky-col2" class have left-sticky column 1 * or 2 respectively. Don't use on column that spans or is spanned by * another column (colspan). Some tables may be using <td> instead of <th>. */.covid19-container table.sticky-col1 tr > :nth-child(1),.covid19-container table.sticky-col2 tr > :nth-child(2) {left: -1px;position: sticky;}/** * Move left-sticky column header above top-sticky column headers. */.covid19-container table.sticky-col1 tr.sticky-row > :nth-child(1),.covid19-container table.sticky-col1 tr.sticky-row1 > :nth-child(1),.covid19-container table.sticky-col1 tr.sticky-row2 > :nth-child(1),.covid19-container table.sticky-col2 tr.sticky-row > :nth-child(2),.covid19-container table.sticky-col2 tr.sticky-row1 > :nth-child(2),.covid19-container table.sticky-col2 tr.sticky-row2 > :nth-child(2) {z-index: 11;}/** * Style expand/collapse links like VTE. */.covid19-container .expand,.covid19-container .collapse {font-size: 88%;}/** * Behavior for expand/collapse links. * - "expand" href is "#unique-id" to target id="unique-id". * - "collapse" href is "#0". */.covid19-container:target .scroll-container {max-height: none;}.covid19-container:target .expand,.covid19-container .collapse {display: none;}.covid19-container .navbar,.covid19-container .expand,.covid19-container:target .collapse {display: inline-block;}.covid19-container:target tr.sticky-row > *,.covid19-container:target .static-row-numbers.wikitable tr.sticky-row::before,.covid19-container:target tr.sticky-row1 > *,.covid19-container:target .static-row-numbers.wikitable tr.sticky-row1::before,.covid19-container:target tr.sticky-row2 > *,.covid19-container:target .static-row-numbers.wikitable tr.sticky-row2::before,.covid19-container:target table.sticky-col1 tr > :nth-child(1),.covid19-container:target table.sticky-col2 tr > :nth-child(2) {position: static;}/** * Fix Firefox missing borders due to position sticky and "wikitable" * collapsed borders. */.covid19-container .wikitable {border-collapse: separate;border-spacing: 0;border-width: 1px 0 0 1px;}.covid19-container .wikitable td,.covid19-container .wikitable th,.covid19-container .static-row-numbers.wikitable tbody tr:not(.static-row-header)::before {border-width: 0 1px 1px 0;}.covid19-container .static-row-numbers.wikitable tr::before {border-color: #a2a9b1;border-style: solid;border-width: 0 1px 1px 0;}/** * Table with "sortunder" class moves "sortable" sort buttons below header * text. "sortable" requires <th> and adds buttons to bottom-most column * header. Use on wide tables due to column header wider than its data. * * Note, selector parts with ".client-js" are untested. */.client-js .covid19-container .sortunder.sortable:not(.jquery-tablesorter) > * > tr:first-child > th:not(.unsortable),.covid19-container .sortunder.jquery-tablesorter th.headerSort {background-position: bottom 0.2em right;padding-bottom: 1em;padding-right: 0.4em;}.client-js .covid19-container .sortunder.sortable:not(.jquery-tablesorter) > * > tr:first-child > th.unsortable,.covid19-container .sortunder.jquery-tablesorter th.unsortable {padding-bottom: 1em;}}@media print {/** * Hide expand/collapse links. VTE links already hidden. */.covid19-container .expand,.covid19-container .collapse {display: none;}}/** * Reset Wikipedia styles causing sticky and float issues on mobile. * - Table "overflow: auto;" fixes sticky on iOS browsers. */@media all and (max-width: 720px) {.covid19-container table {display: table; /* Was "block" */overflow: auto; /* We already have an overflow context 'higher up' */}.covid19-container caption {display: table-caption; /* Was "block" */}}/** * Reset Sticky Table Headers gadget styles causing sticky issues if enabled. * * Unsure if "position: -webkit-sticky;" reset, so reset "bottom" and "top". * * @see https://www.search.com.vn/wiki/en/MediaWiki:Gadget-StickyTableHeaders.css * @see https://www.search.com.vn/wiki/en/MediaWiki:Gadget-StickyTableHeaders.js */.covid19-container .jquery-tablesorter > thead,.covid19-container .jquery-tablesorter > tfoot,.covid19-container .mw-sticky-header > thead,.covid19-container .mw-sticky-header > tfoot {bottom: auto; /* Was "0" */position: static; /* Was "sticky" */top: auto; /* Was "0" */}
🔥 Top keywords: Main PageSpecial:SearchPage 3Wikipedia:Featured picturesHouse of the DragonUEFA Euro 2024Bryson DeChambeauJuneteenthInside Out 2Eid al-AdhaCleopatraDeaths in 2024Merrily We Roll Along (musical)Jonathan GroffJude Bellingham.xxx77th Tony AwardsBridgertonGary PlauchéKylian MbappéDaniel RadcliffeUEFA European Championship2024 ICC Men's T20 World CupUnit 731The Boys (TV series)Rory McIlroyN'Golo KantéUEFA Euro 2020YouTubeRomelu LukakuOpinion polling for the 2024 United Kingdom general electionThe Boys season 4Romania national football teamNicola CoughlanStereophonic (play)Gene WilderErin DarkeAntoine GriezmannProject 2025