Template:Sticky table start/styles.css
/** * Classes to make row N or thead top sticky, and/or column N left sticky. * * Div classes: * - sticky-table-scroll: Adds scroll; contains table. * * T…
/**
* Classes to make row N or thead top sticky, and/or column N left sticky.
*
* Div classes:
* - sticky-table-scroll: Adds scroll; contains table.
*
* Table classes:
* - sticky-table-head: Top sticky thead rows.
* - sticky-table-row1: Top sticky first row.
* - sticky-table-row2: Top sticky second row.
* - sticky-table-col1: Left sticky first column.
* - sticky-table-col2: Left sticky second column.
*
* Cell classes:
* - sticky-table-none: Cell not sticky to fix span issues.
* - sticky-table-left: Cell left sticky to fix span issues.
*
* 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.
*/
@media screen {
/**
* Div containers with restricted height/width + scroll.
*/
.sticky-table-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: 50px; /* In case another element floats right. */
overflow-y: auto;
/*scrollbar-gutter: stable; /* Fix premature wrapping Gecko: 764076. */
}
.sticky-table-scroll table {
margin-bottom: 0; /* Moved to div. */
margin-top: 0; /* Moved to div. */
}
.sticky-table-scroll caption {
text-align: left; /* Fix narrow, centered caption hidden on wide table. */
}
/**
* Make top sticky.
*/
.sticky-table-scroll .sticky-table-row1:not(.sticky-table-row2):not(.sticky-table-head) > thead > tr:nth-child(1),
.sticky-table-scroll .sticky-table-row1:not(.sticky-table-row2):not(.sticky-table-head) > caption + tbody > tr:nth-child(1),
.sticky-table-scroll .sticky-table-row1:not(.sticky-table-row2):not(.sticky-table-head) > tbody:first-child > tr:nth-child(1),
.sticky-table-scroll .sticky-table-row2:not(.sticky-table-row1):not(.sticky-table-head) > thead > tr:nth-child(2),
.sticky-table-scroll .sticky-table-row2:not(.sticky-table-row1):not(.sticky-table-head) > caption + tbody > tr:nth-child(2),
.sticky-table-scroll .sticky-table-row2:not(.sticky-table-row1):not(.sticky-table-head) > tbody:first-child > tr:nth-child(2),
.sticky-table-scroll .sticky-table-head:not(.sticky-table-row1):not(.sticky-table-row2) > thead {
position: sticky; /* Was "static". */
top: 0;
z-index: 10;
}
/**
* Make left sticky.
*/
.sticky-table-scroll .sticky-table-col1:not(.sticky-table-col2) > * > tr > :nth-child(1):not(.sticky-table-none),
.sticky-table-scroll .sticky-table-col2:not(.sticky-table-col1) > * > tr > :nth-child(2):not(.sticky-table-none),
.sticky-table-scroll tr > .sticky-table-left {
position: sticky; /* Was "static". */
left: 0;
z-index: 9;
}
/**
* Fix scrolling data shows through sticky's transparent background.
*/
.sticky-table-scroll table:not(.wikitable) {
background-color: var(--color-inverted, #fff);
}
.sticky-table-scroll thead,
.sticky-table-scroll tbody,
.sticky-table-scroll tfoot,
.sticky-table-scroll tr,
.sticky-table-scroll td,
.sticky-table-scroll table:not(.wikitable) > * > tr > th {
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 borders.
*
* Note: {{Static row numbers}} border-bottom separating header/sorttop from
* numbers missing and not selectable with CSS.
*/
.sticky-table-scroll .wikitable {
border-collapse: separate; /* Was "collapse". */
border-spacing: 0;
border-width: 1px 0 0 1px;
}
.sticky-table-scroll .wikitable > * > tr > td,
.sticky-table-scroll .wikitable > * > tr > th {
border-width: 0 1px 1px 0;
}
/* Adjust {{static row numbers}} borders. */
.sticky-table-scroll .static-row-numbers.wikitable > * > tr::before {
border-right-width: 1px;
}
/* .sticky-table-scroll .static-row-numbers.wikitable > * > .sorttop:not(:has(~ .sorttop))::before, */
.sticky-table-scroll .static-row-numbers.wikitable > tbody > tr:last-child::before,
.sticky-table-scroll .static-row-numbers.wikitable > tfoot > tr:last-child::before {
border-bottom-width: 1px;
}
/* After sort, "tbody:first-of-type" targets "tbody>tr:first-child". */
.sticky-table-scroll .static-row-numbers.wikitable > tbody:first-of-type > tr:not(.static-row-header)::before {
border-top-width: 0;
border-left-width: 0;
}
/**
* Fix Timeless skin very wide tables not sticky.
*/
body.skin-timeless .sticky-table-scroll .overflowed,
body.skin-timeless .sticky-table-scroll .overflowed .content-table {
overflow: visible; /* Reset. */
}
body.skin-timeless .sticky-table-scroll .overflowed {
margin-top: 0; /* Was "1em". */
margin-bottom: 0; /* Was "1em". */
}
body.skin-timeless .sticky-table-scroll .scroll-right.overflowed .content-table-right {
box-shadow: none; /* Reset. */
border-left: none; /* Reset. */
}
body.skin-timeless .sticky-table-scroll .wikitable {
padding: 0;
}
/**
* Fix VisualEditor (VE) removing scrollable and hiding content.
*/
html.ve-activated .sticky-table-scroll {
max-height: none; /* Unhide. */
}
}
/**
* Fix skins width <=639px (mobile) not sticky.
*/
@media screen and (max-width: 639px) {
body.skin-minerva .sticky-table-scroll table,
body.skin-monobook .sticky-table-scroll table,
body.skin-vector-legacy .sticky-table-scroll table,
body.skin-vector-2022 .sticky-table-scroll table {
display: table; /* Was "block". */
}
body.skin-minerva .sticky-table-scroll caption {
display: table-caption; /* Was "block". */
}
}
/**
* Fix "Sticky Table Headers" gadget issues; this template has priority.
*/
@media screen {
.sticky-table-scroll .jquery-tablesorter:not(.sticky-table-head) > thead,
.sticky-table-scroll .mw-sticky-header:not(.sticky-table-head) > thead {
position: static; /* Was "sticky". */
top: auto; /* Was "0". */
z-index: auto; /* Was "10". */
}
.sticky-table-scroll .jquery-tablesorter > tfoot,
.sticky-table-scroll .mw-sticky-header > tfoot {
position: static; /* Was "sticky". */
bottom: auto; /* Was "0". */
z-index: auto; /* Was "10". */
}
}
@media screen and (min-width: 1120px) {
html.client-js.vector-sticky-header-enabled .sticky-table-scroll :not(.sticky-table-head) .mw-sticky-header-element {
top: auto !important; /* Was "3.125rem !important". */
}
}
/* [[Category:テンプレートスタイル]] */
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.