Vorlage:CSS/stickysorttable.css: Unterschied zwischen den Versionen
Zur Navigation springen
Zur Suche springen
(Die Seite wurde neu angelegt: „/* Kategorie:Webtrees Vgl. auch Vorlage:CSS/stickytable.css für wikitable Tabellen. <syntaxhighlight lang="css"> /* Kopfzeile und/oder erste Spalte…“) |
K (table width) |
||
(2 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) | |||
Zeile 1: | Zeile 1: | ||
/* [[Kategorie:Webtrees]] | /* [[Kategorie:Vorlage:Formatierung]] | ||
[[Kategorie:Webtrees]] | |||
Vgl. auch [[Vorlage:CSS/stickytable.css]] für wikitable Tabellen. | Vgl. auch [[Vorlage:CSS/stickytable.css]] für wikitable Tabellen. | ||
<syntaxhighlight lang="css"> | <syntaxhighlight lang="css"> | ||
Zeile 10: | Zeile 11: | ||
- https://codepen.io/jon/pen/JZNvap | - https://codepen.io/jon/pen/JZNvap | ||
*/ | */ | ||
@media screen { | |||
.stickysorttablewrapperh, .stickysorttablewrapperhc1, .stickysorttablewrapperc1 | .stickysorttablewrapperh, .stickysorttablewrapperhc1, .stickysorttablewrapperc1 | ||
{ | { | ||
Zeile 26: | Zeile 27: | ||
{ | { | ||
border-collapse: collapse; | border-collapse: collapse; | ||
} | } | ||
Zeile 55: | Zeile 55: | ||
top: 0; | top: 0; | ||
background-clip: padding-box; | background-clip: padding-box; | ||
} | |||
} | } | ||
/*</syntaxhighlight>*/ | /*</syntaxhighlight>*/ |
Aktuelle Version vom 5. Mai 2023, 22:25 Uhr
/* Vgl. auch Vorlage:CSS/stickytable.css für wikitable Tabellen.
/*
Kopfzeile und/oder erste Spalte einer class="wikitable sortable" Tabelle beim Scrollen fixieren;
die Tabelle muss lediglich in einen div.stickysorttablewrapper-Tag eingeschlossen werden
(.stickysorttablewrapperh = nur Kopfzeile / .stickysorttablewrapperhc1 = Kopfzeile und 1. Spalte / .stickysorttablewrapperc1 = 1. Spalte )
Kopfzeile: table > thead > tr > th
- https://css-tricks.com/a-table-with-both-a-sticky-header-and-a-sticky-first-column/
- https://codepen.io/jon/pen/JZNvap
*/
@media screen {
.stickysorttablewrapperh, .stickysorttablewrapperhc1, .stickysorttablewrapperc1
{
-ms-scroll-chaining: none;
overscroll-behavior: contain;
flex-direction:column;
display:flex;
height:95vh;
overflow:scroll;
flex-grow:1;
width:98%;
}
.stickysorttablewrapperh table, .stickysorttablewrapperhc1 table, .stickysorttablewrapperc1 table
{
border-collapse: collapse;
}
.stickysorttablewrapperhc1 table thead tr > :first-child, .stickysorttablewrapperhc1 table tbody tr > :first-child, .stickysorttablewrapperc1 table tbody tr > :first-child, .stickysorttablewrapperc1 table thead tr > :first-child
{
background: #ddd;
position: sticky;
z-index:2;
left:0;
font-weight: bold;
background-clip: padding-box;
}
.stickysorttablewrapperhc1 table thead tr:first-child > :first-child
{
position: sticky;
z-index:3;
left:0;
top:0;
background-clip: padding-box;
}
.stickysorttablewrapperhc1 table thead th, .stickysorttablewrapperh table thead th
{
position: sticky;
padding:.5rem;
z-index:1;
top: 0;
background-clip: padding-box;
}
}
/*
*/