https://statistique.vigneau.ca/w/index.php?action=history&feed=atom&title=Mod%C3%A8le%3ASticky_header%2Fstyles.css 2026-05-20T08:22:16Z Historique des versions pour cette page sur le wiki MediaWiki 1.44.2 https://statistique.vigneau.ca/w/index.php?title=Mod%C3%A8le:Sticky_header/styles.css&diff=872&oldid=prev 2024-12-08T17:36:26Z

<p>Page créée avec « <span class="autocomment">{{pp-template}} : </span> /** * Make first row or thead element top sticky. * * Table classes: * - sticky-header (first row) * - sticky-header-multi (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. * * Not... »</p> <p><b>Nouvelle page</b></p><div>/* {{pp-template}} */<br /> /**<br /> * Make first row or thead element top sticky.<br /> *<br /> * Table classes:<br /> * - sticky-header (first row)<br /> * - sticky-header-multi (thead; headers moved via sortable + JavaScript)<br /> *<br /> * Tested:<br /> * - Windows 10: (all skins) Chrome, Firefox, Edge.<br /> * - Android Galaxy S21 (Minerva): Chrome, Firefox.<br /> * - iPhone SE 2020 (Minerva): Chrome, Edge, Firefox, Opera, Safari.<br /> * - Wikipedia Android app.<br /> * - Print: Not styled.<br /> * - No JavaScript.<br /> *<br /> * Notes:<br /> * - Sortable moves to thead any header rows and (after sort) sorttop rows.<br /> * - Sticky gadget (.mw-sticky-header) moves to thead any wikitable header rows.<br /> */<br /> @media screen {<br /> /**<br /> * Make top sticky.<br /> */<br /> .sticky-header &gt; thead &gt; tr:first-child,<br /> .sticky-header &gt; caption + tbody &gt; tr:first-child,<br /> .sticky-header &gt; tbody:first-child &gt; tr:first-child,<br /> .sticky-header-multi &gt; thead {<br /> position: sticky; /* Was &quot;static&quot;. */<br /> top: 0;<br /> z-index: 10;<br /> }<br /> <br /> /**<br /> * Fix scrolling data shows through sticky&#039;s transparent background.<br /> */<br /> .sticky-header:not(.wikitable),<br /> .sticky-header-multi:not(.wikitable),<br /> body.skin-minerva .sticky-header-multi.wikitable { /* .wikitable .sorttop */<br /> background-color: white;<br /> }<br /> .sticky-header-multi &gt; thead, /* .wikitable .sorttop &amp; plain table */<br /> .sticky-header:not(.wikitable) &gt; thead,<br /> .sticky-header:not(.wikitable) &gt; tbody,<br /> .sticky-header:not(.wikitable) &gt; thead &gt; tr,<br /> .sticky-header:not(.wikitable) &gt; tbody &gt; tr { <br /> background-color: inherit;<br /> }<br /> <br /> /**<br /> * Fix missing borders due to sticky position and wikitable collapsed borders.<br /> * https://bugs.webkit.org/show_bug.cgi?id=128486<br /> *<br /> * Skip rare plain table separated borders, which sometimes shows scrolling<br /> * data through sticky&#039;s 2px &quot;border-spacing&quot;.<br /> *<br /> * Skip very rare Timeless plain table &quot;.mw-datatable&quot; collapsed boarders.<br /> */<br /> .sticky-header.wikitable,<br /> .sticky-header-multi.wikitable {<br /> border-collapse: separate; /* Was &quot;collapse&quot;. */<br /> border-spacing: 0;<br /> border-width: 0 1px 1px 0;<br /> }<br /> .sticky-header.wikitable td,<br /> .sticky-header.wikitable th,<br /> .sticky-header-multi.wikitable td,<br /> .sticky-header-multi.wikitable th {<br /> border-width: 1px 0 0 1px;<br /> }<br /> body.skin-timeless .sticky-header.wikitable,<br /> body.skin-timeless .sticky-header-multi.wikitable {<br /> border-bottom-width: 0.2em;<br /> padding: 0;<br /> }<br /> /* Adjust {{static row numbers}} borders. */<br /> .sticky-header.static-row-numbers.wikitable tr::before,<br /> .sticky-header-multi.static-row-numbers.wikitable tr::before {<br /> border-left-width: 1px;<br /> }<br /> .sticky-header.static-row-numbers.wikitable &gt; thead &gt; tr:first-child::before,<br /> .sticky-header.static-row-numbers.wikitable &gt; caption + tbody &gt; tr:first-child::before,<br /> .sticky-header.static-row-numbers.wikitable &gt; tbody:first-child &gt; tr:first-child::before,<br /> .sticky-header-multi.static-row-numbers.wikitable &gt; thead &gt; tr:first-child::before,<br /> .sticky-header-multi.static-row-numbers.wikitable &gt; caption + tbody &gt; tr:first-child::before,<br /> .sticky-header-multi.static-row-numbers.wikitable &gt; tbody:first-child &gt; tr:first-child::before,<br /> /* Sortbotton #1: all. When supported, consolidate #1-2 to tr:nth-child(1 of .sortbottom)::before */<br /> .sticky-header.static-row-numbers.wikitable .sortbottom::before,<br /> .sticky-header-multi.static-row-numbers.wikitable .sortbottom::before {<br /> border-top-width: 1px;<br /> }<br /> /* Sortbottom #2: all minus 1st. */<br /> .sticky-header.static-row-numbers.wikitable .sortbottom ~ .sortbottom::before,<br /> .sticky-header-multi.static-row-numbers.wikitable .sortbottom ~ .sortbottom::before {<br /> border-top-width: 0;<br /> }<br /> .sticky-header.static-row-numbers.wikitable &gt; tbody &gt; tr:not(.static-row-header)::before,<br /> .sticky-header-multi.static-row-numbers.wikitable &gt; tbody &gt; tr:not(.static-row-header)::before {<br /> border-bottom-width: 0 !important;<br /> border-right-width: 0 !important;<br /> }<br /> }<br /> <br /> /**<br /> * Adjust to other sticky elements.<br /> */<br /> @media screen and (min-width: 1000px) {<br /> /* Vector (2022) width &gt;=1000px: Below sticky header bar. */<br /> body.vector-sticky-header-visible .sticky-header &gt; thead &gt; tr:first-child,<br /> body.vector-sticky-header-visible .sticky-header &gt; caption + tbody &gt; tr:first-child,<br /> body.vector-sticky-header-visible .sticky-header &gt; tbody:first-child &gt; tr:first-child,<br /> body.vector-sticky-header-visible .sticky-header-multi &gt; thead {<br /> top: 3.125rem;<br /> }<br /> }<br /> @media screen and (min-width: 851px) {<br /> /* Timeless width &gt;=851px: Below sticky header bar. */<br /> body.skin-timeless .sticky-header &gt; thead &gt; tr:first-child,<br /> body.skin-timeless .sticky-header &gt; caption + tbody &gt; tr:first-child,<br /> body.skin-timeless .sticky-header &gt; tbody:first-child &gt; tr:first-child,<br /> body.skin-timeless .sticky-header-multi &gt; thead {<br /> top: 3.51em;<br /> }<br /> }<br /> <br /> /**<br /> * Monobook width &lt;=550px not sticky. Reset to avoid potential issues.<br /> *<br /> * Reason, can&#039;t override style:<br /> * - body.skin--responsive .monobook-body {overflow: auto;}<br /> */<br /> @media screen and (max-width: 550px) {<br /> body.skin-monobook .sticky-header &gt; thead &gt; tr:first-child,<br /> body.skin-monobook .sticky-header &gt; caption + tbody &gt; tr:first-child,<br /> body.skin-monobook .sticky-header &gt; tbody:first-child &gt; tr:first-child,<br /> body.skin-monobook .sticky-header-multi &gt; thead {<br /> position: static;<br /> }<br /> body.skin-monobook .sticky-header.wikitable,<br /> body.skin-monobook .sticky-header-multi.wikitable {<br /> border-collapse: collapse;<br /> }<br /> }<br /> <br /> /**<br /> * Minerva width &lt;=720px (mobile) not sticky. Override to make sticky.<br /> *<br /> * Android issue: wide table horizontal scroll lost, wider page,<br /> * zoom out for sticky headers, unreadable when sticky.<br /> *<br /> * iPhone issue: none.<br /> */<br /> @media screen and (max-width: 720px) {<br /> body.skin-minerva .sticky-header,<br /> body.skin-minerva .sticky-header-multi {<br /> display: table; /* Was &quot;block&quot;. */<br /> }<br /> body.skin-minerva .sticky-header &gt; caption,<br /> body.skin-minerva .sticky-header-multi &gt; caption {<br /> display: table-caption; /* Was &quot;block&quot;. */<br /> }<br /> }<br /> <br /> /* [[Catégorie:Sous-page de modèle feuille de style]] */</div>

Edwin