Template:Sticky header/sandbox/styles.css

/** * Make first row or thead element top sticky. * * Div class (optional): * - sticky-header-scroll: contain table; restrict height/width; sticky headers *  when vertical scroll visible (table taller than 75vh screen). * * Table classes: * - sticky-header: sticky first row. * - sticky-header-multi: sticky thead; headers moved via sortable + JavaScript. * * Tested: * - Windows 10: (all skins) Chrome, Firefox, Edge. * - Android Galaxy S21 (Minerva): Chrome, Firefox. * - iPhone SE 2020 (Minerva): Chrome, Edge, Firefox, Opera, Safari. * - Wikipedia Android app. * - Print: Not styled. * - No JavaScript. * * Notes: * - Sortable moves to thead any header rows and (after sort) sorttop rows. * - Sticky gadget (.mw-sticky-header) moves to thead any wikitable header rows. * * Issues: * - Monobook width <=550px not sticky unless "sticky-header-scroll". *  Can't override: *  body.skin--responsive .monobook-body {overflow: auto;} */ @media screen { /**  * Make top sticky. */ .sticky-header > thead > tr:first-child, .sticky-header > caption + tbody > tr:first-child, .sticky-header > tbody:first-child > tr:first-child, .sticky-header-multi > thead { position: sticky; /* Was "static". */   top: 0; z-index: 10; }

/**  * Fix scrolling data shows through sticky's transparent background. */ .sticky-header:not(.wikitable), .sticky-header-multi:not(.wikitable), body.skin-minerva .sticky-header-multi.wikitable { /* .wikitable .sorttop */ background-color: white; } html.skin-theme-clientpref-night body.skin-minerva .sticky-header-multi.wikitable { /* .wikitable .sorttop */ background-color: #101418; } @media (prefers-color-scheme: dark) { html.skin-theme-clientpref-night body.skin-minerva .sticky-header-multi.wikitable { /* .wikitable .sorttop */ background-color: #101418; } } .sticky-header-multi > thead, /* .wikitable .sorttop & plain table */ .sticky-header:not(.wikitable) > thead, .sticky-header:not(.wikitable) > tbody, .sticky-header:not(.wikitable) > thead > tr, .sticky-header:not(.wikitable) > tbody > tr { background-color: inherit; }

/**  * Fix missing borders due to sticky position and wikitable collapsed borders. * https://bugs.webkit.org/show_bug.cgi?id=128486 *  * Skip rare plain table separated borders, which sometimes shows scrolling * data through sticky's 2px "border-spacing". *  * Skip very rare Timeless plain table ".mw-datatable" collapsed boarders. */ .sticky-header.wikitable, .sticky-header-multi.wikitable { border-collapse: separate; /* Was "collapse". */   border-spacing: 0; border-width: 0 1px 1px 0; } .sticky-header.wikitable td, .sticky-header.wikitable th, .sticky-header-multi.wikitable td, .sticky-header-multi.wikitable th { border-width: 1px 0 0 1px; } body.skin-timeless .sticky-header.wikitable, body.skin-timeless .sticky-header-multi.wikitable { border-bottom-width: 0.2em; padding: 0; } /* Adjust  borders. */ .sticky-header.static-row-numbers.wikitable tr::before, .sticky-header-multi.static-row-numbers.wikitable tr::before { border-left-width: 1px; } .sticky-header.static-row-numbers.wikitable > thead > tr:first-child::before, .sticky-header.static-row-numbers.wikitable > caption + tbody > tr:first-child::before, .sticky-header.static-row-numbers.wikitable > tbody:first-child > tr:first-child::before, .sticky-header-multi.static-row-numbers.wikitable > thead > tr:first-child::before, .sticky-header-multi.static-row-numbers.wikitable > caption + tbody > tr:first-child::before, .sticky-header-multi.static-row-numbers.wikitable > tbody:first-child > tr:first-child::before, /* Sortbotton #1: all. When supported, consolidate #1-2 to tr:nth-child(1 of .sortbottom)::before */ .sticky-header.static-row-numbers.wikitable .sortbottom::before, .sticky-header-multi.static-row-numbers.wikitable .sortbottom::before { border-top-width: 1px; } /* Sortbottom #2: all minus 1st. */ .sticky-header.static-row-numbers.wikitable .sortbottom ~ .sortbottom::before, .sticky-header-multi.static-row-numbers.wikitable .sortbottom ~ .sortbottom::before { border-top-width: 0; } .sticky-header.static-row-numbers.wikitable > tbody > tr:not(.static-row-header)::before, .sticky-header-multi.static-row-numbers.wikitable > tbody > tr:not(.static-row-header)::before { border-bottom-width: 0 !important; border-right-width: 0 !important; }

/**  * Fix Timeless. Wasn't sticky when on very wide tables. *  * :has not supported, can't restrict to sticky tables. */ body.skin-timeless .content-table-scrollbar, body.skin-timeless .overflowed, body.skin-timeless .overflowed .content-table { overflow: visible; /* Reset. */ }  body.skin-timeless .scroll-right.overflowed .content-table-right { box-shadow: none; /* Reset. */   border-left: none; /* Reset. */ }

/**  * Optional div container with restricted height/width + scroll. */ .sticky-header-scroll { margin-bottom: 1em; /* Moved from table. */   margin-top: 1em; /* Moved from table. */   max-height: 75vh; max-width: max-content; /* Vertical scroll next to div. */   min-width: 300px; /* In case another element floats right. */   overflow-y: auto; } .sticky-header-scroll .sticky-header, .sticky-header-scroll .sticky-header-multi { margin-bottom: 0; /* Move to div. */   margin-top: 0; /* Move to div. */ }  .sticky-header-scroll .sticky-header caption, .sticky-header-scroll .sticky-header-multi caption { text-align: left; /* Fix short centered caption hidden on wide table. */ } }

/** * Adjust to other sticky elements. */ @media screen and (min-width: 1000px) { /* Vector (2022) width >=1000px: Below sticky header bar. */ body.vector-sticky-header-visible .sticky-header > thead > tr:first-child, body.vector-sticky-header-visible .sticky-header > caption + tbody > tr:first-child, body.vector-sticky-header-visible .sticky-header > tbody:first-child > tr:first-child, body.vector-sticky-header-visible .sticky-header-multi > thead { top: 3.125rem; } /* Vector (2022) width >=1000px: Top of div container. */ body.vector-sticky-header-visible .sticky-header-scroll .sticky-header > thead > tr:first-child, body.vector-sticky-header-visible .sticky-header-scroll .sticky-header > caption + tbody > tr:first-child, body.vector-sticky-header-visible .sticky-header-scroll .sticky-header > tbody:first-child > tr:first-child, body.vector-sticky-header-visible .sticky-header-scroll .sticky-header-multi > thead { top: 0; } } @media screen and (min-width: 851px) { /* Timeless width >=851px: Below sticky header bar. */ body.skin-timeless .sticky-header > thead > tr:first-child, body.skin-timeless .sticky-header > caption + tbody > tr:first-child, body.skin-timeless .sticky-header > tbody:first-child > tr:first-child, body.skin-timeless .sticky-header-multi > thead { top: 3.51em; } /* Timeless width >=851px: Top of div container. */ body.skin-timeless .sticky-header-scroll .sticky-header > thead > tr:first-child, body.skin-timeless .sticky-header-scroll .sticky-header > caption + tbody > tr:first-child, body.skin-timeless .sticky-header-scroll .sticky-header > tbody:first-child > tr:first-child, body.skin-timeless .sticky-header-scroll .sticky-header-multi > thead { top: 0; } }

/** * Minerva width <=720px (mobile) not sticky. Override to make sticky. * * Android issue: wide table horizontal scroll lost, wider page, * zoom out for sticky headers, unreadable when sticky. * * iPhone issue: none. */ @media screen and (max-width: 720px) { body.skin-minerva .sticky-header, body.skin-minerva .sticky-header-multi { display: table; /* Was "block". */ }  body.skin-minerva .sticky-header > caption, body.skin-minerva .sticky-header-multi > caption { display: table-caption; /* Was "block". */ } }