Template:Static row numbers/styles.css
/* {{pp-template}} */
/**
* Add a static (unsortable) column of numbers to the left of a table.
*
* Table classes:
* - static-row-numbers: Display column of right-aligned numbers.
* - static-row-numbers-center: Center align numbers.
* - static-row-numbers-left: Left align numbers.
* - static-row-header-text: Display "No." text column label.
* - static-row-header-hash: Display hash ("#") symbol column label.
*
* Row classes:
* - static-row-header: Disable number and borders.
* - static-row-numbers-norank: Disable number and keep borders.
*
* Table data attributes:
* - data-srn-limit="#": (#=10) Remove numbers beyond row #.
*
* Tested:
* - Windows 10: (all skins) Chrome, Firefox, Edge.
* - Android Galaxy S21 (MinervaNeue): Chrome, Firefox.
* - Wikipedia Android app.
* - Print.
* - No JavaScript.
* - Sticky gadget in Windows browsers (default skin).
* - Dark Reader browser extention in Windows browsers (default skin).
*
* 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.
*/
.static-row-numbers {
counter-reset: rowNumber;
}
.static-row-numbers tr::before {
content: "";
display: table-cell;
padding-right: 0.5em;
padding-left: 0.5em;
text-align: right;
vertical-align: inherit;
}
.static-row-numbers.static-row-numbers-center tr::before {
text-align: center;
}
.static-row-numbers.static-row-numbers-left tr::before {
text-align: left;
}
.static-row-numbers.wikitable tr::before {
background-color: var(--background-color-neutral, #eaecf0);
}
/**
* Add count to all tbody rows without the "static-row-numbers-norank" or
* "static-row-header" classes. If no thead, then skip the first tbody row.
*/
.static-row-numbers thead + tbody tr:first-child:not(.static-row-header):not(.static-row-numbers-norank)::before,
.static-row-numbers tbody tr:not(:first-child):not(.static-row-header):not(.static-row-numbers-norank)::before {
counter-increment: rowNumber;
content: counter(rowNumber);
}
/**
* Remove count on tbody rows beyond the limit.
* Note, nth-child cannot be combined with not() to exclude headers and the
* "static-row-header" and "static-row-numbers-norank" classes:
* - Table must be sortable to move headers pre-sort to thead.
* - No sorttop (static-row-header) above sortable data; moved post-sort.
* - No static-row-numbers-norank in sortable data.
*/
.static-row-numbers.sortable[data-srn-limit="10"] tbody tr:nth-child(n+11)::before {
content: "";
}
/**
* Add column label to first row in thead or, if no thead, in tbody.
*/
.static-row-header-text.static-row-numbers thead tr:first-child::before,
.static-row-header-text.static-row-numbers caption + tbody tr:first-child::before,
.static-row-header-text.static-row-numbers tbody:first-child tr:first-child::before {
content: "No.";
font-weight: bold;
}
.static-row-header-hash.static-row-numbers thead tr:first-child::before,
.static-row-header-hash.static-row-numbers caption + tbody tr:first-child::before,
.static-row-header-hash.static-row-numbers tbody:first-child tr:first-child::before {
content: "#";
font-weight: bold;
}
/**
* Add borders in numbers column.
*
* Windows Firefox tr::before doesn't inherit color, so hard set.
* Plain table borders on Timeless {{row hover highlight}} mw-datatable.
*/
/* Wikitable. */
.static-row-numbers.wikitable tr::before {
border: 0 solid var(--border-color-base, #a2a9b1);
}
.static-row-numbers.wikitable thead + tbody tr:first-child:not(.static-row-header)::before,
.static-row-numbers.wikitable tbody tr:not(:first-child):not(.static-row-header)::before {
border-width: 1px;
}
body.skin-monobook .static-row-numbers.wikitable tr::before {
border-color: #aaa;
}
body.skin-timeless .static-row-numbers.wikitable tr::before {
border-color: #c8ccd1;
}
/* Plain with border. */
table[border].static-row-numbers:not(.wikitable) tr::before {
border: 0 inset var(--color-base, #202122);
}
table[border].static-row-numbers:not(.wikitable) thead + tbody tr:first-child:not(.static-row-header)::before,
table[border].static-row-numbers:not(.wikitable) tbody tr:not(:first-child):not(.static-row-header)::before {
border-width: 1px;
}
/* Dark mode border colors calc differ for table and tr::before, per engine. */
html.skin-theme-clientpref-night table[border].static-row-numbers:not(.wikitable),
html.skin-theme-clientpref-night table[border].static-row-numbers:not(.wikitable) tr::before,
html.skin-theme-clientpref-night table[border].static-row-numbers:not(.wikitable) th,
html.skin-theme-clientpref-night table[border].static-row-numbers:not(.wikitable) td {
/* Accessibility: Wikipedia dark mode. */
border-color: gray;
}
@media (prefers-color-scheme: dark) {
html.skin-theme-clientpref-os table[border].static-row-numbers:not(.wikitable),
html.skin-theme-clientpref-os table[border].static-row-numbers:not(.wikitable) tr::before,
html.skin-theme-clientpref-os table[border].static-row-numbers:not(.wikitable) th,
html.skin-theme-clientpref-os table[border].static-row-numbers:not(.wikitable) td {
/* Accessibility: OS dark mode, Wikidedia automatic mode. */
border-color: gray;
}
}
/* Plain with optional border + .mw-datatable. */
body.skin-timeless .static-row-numbers.mw-datatable:not(.wikitable) tr::before {
border: 0 solid #c8ccd1;
}
body.skin-timeless .static-row-numbers.mw-datatable:not(.wikitable) thead + tbody tr:first-child:not(.static-row-header)::before,
body.skin-timeless .static-row-numbers.mw-datatable:not(.wikitable) tbody tr:not(:first-child):not(.static-row-header)::before {
border-width: 1px;
}
Content Disclaimer
Informasi ini disarikan dari Wikipedia dan disajikan kembali untuk tujuan edukasi. Konten tersedia di bawah lisensi CC BY-SA 3.0. Kami tidak bertanggung jawab atas ketidakakuratan data yang bersumber dari kontribusi publik tersebut.
- The information displayed on this website is sourced in part or in whole from Wikipedia and has been adapted for the purpose of restating it. We strive to provide accurate and relevant information, however:
- There is no guarantee of absolute accuracy. Wikipedia is an open, collaborative project that can be edited by anyone, so information is subject to change.
- It is not intended to constitute professional advice. The content displayed is for informational and educational purposes only. For important decisions (e.g., medical, legal, or financial), please consult a professional.
- Content copyright. Wikipedia is licensed under the Creative Commons Attribution-ShareAlike License (CC BY-SA). This means that content may be reused with appropriate attribution and shared under a similar license.
- Responsible use. Any risk arising from the use of information from this website is entirely the responsibility of the user.