Vorlage:CSS/stickytable.css: Unterschied zwischen den Versionen

aus wiki, dem genealogischen Lexikon zum Mitmachen.
Zur Navigation springen Zur Suche springen
(Die Seite wurde neu angelegt: „/* Kategorie:Webtrees <syntaxhighlight lang="css"> /* Kopfzeile und/oder erste Spalte einer class="wikitable" Tabelle beim Scrollen fixieren; die Tabelle…“)
 
K (Kategorisierung)
 
(2 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 1: Zeile 1:
/* [[Kategorie:Webtrees]] <syntaxhighlight lang="css">
/* [[Kategorie:Vorlage:Formatierung]]
[[Kategorie:Webtrees]]
Vgl. auch [[Vorlage:CSS/stickysorttable.css]] für "wikitable sortable" Tabellen.
<syntaxhighlight lang="css">
/*
/*
Kopfzeile und/oder erste Spalte einer class="wikitable" Tabelle beim Scrollen fixieren;
Kopfzeile und/oder erste Spalte einer class="wikitable" Tabelle beim Scrollen fixieren;
Zeile 8: Zeile 11:
- https://codepen.io/jon/pen/JZNvap
- https://codepen.io/jon/pen/JZNvap
*/
*/
 
@media screen {
.stickytablewrapperh, .stickytablewrapperhc1, .stickytablewrapperc1  
.stickytablewrapperh, .stickytablewrapperhc1, .stickytablewrapperc1  
{
{
Zeile 52: Zeile 55:
   top: 0;
   top: 0;
   background-clip: padding-box;
   background-clip: padding-box;
}
}
}
/*</syntaxhighlight>*/
/*</syntaxhighlight>*/

Aktuelle Version vom 4. April 2023, 17:46 Uhr

/* Vgl. auch Vorlage:CSS/stickysorttable.css für "wikitable sortable" Tabellen.

/*
	Kopfzeile und/oder erste Spalte einer class="wikitable" Tabelle beim Scrollen fixieren;
	die Tabelle muss lediglich in einen div.stickytablewrapper-Tag eingeschlossen werden
	(.stickytablewrapperh = nur Kopfzeile / .stickytablewrapperhc1 = Kopfzeile und 1. Spalte / .stickytablewrapperc1 = 1. Spalte )
    Kopfzeile: table > tbody > 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 {
.stickytablewrapperh, .stickytablewrapperhc1, .stickytablewrapperc1 
{
  -ms-scroll-chaining: none;
  overscroll-behavior: contain;
  flex-direction:column;
  display:flex;
  height:95vh;
  overflow:scroll;
  flex-grow:1;
  width:98%;
}

.stickytablewrapperh table, .stickytablewrapperhc1 table, .stickytablewrapperc1 table 
{
  border-collapse: collapse;
  width:200%;		
}

.stickytablewrapperhc1 table tbody tr > :first-child, .stickytablewrapperc1 table tbody tr > :first-child 
{
  background: #ddd;
  position: sticky;
  z-index:2;
  left:0;
  font-weight: bold;
  background-clip: padding-box;
}

.stickytablewrapperhc1 table tbody tr:first-child > :first-child 
{
  z-index:3;
  left:0;
  top:0;
  background-clip: padding-box;
}
	
.stickytablewrapperhc1 table tbody th, .stickytablewrapperh table tbody th 
{
  position: sticky;
  padding:.5rem;
  z-index:1;
  top: 0;
  background-clip: padding-box;
}
}
/*

*/