Vorlage:CSS/stickytable.css
Zur Navigation springen
Zur Suche springen
/* 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;
}
}
/*
*/