Vorlage:Tabellenstile/styles.css
Erscheinungsbild
/*
* == tabelle-container ==
* div mit overflow erzeugen, in dem die Tabelle scrollbar wird. Kann in Höhe und Breite beschränkt werden.
* Der Außenabstand wird von der Tabelle auf das div übertragen.
*/
.tabelle-container {
overflow: auto;
margin: 1em 0;
}
.tabelle-container table {
margin: 0;
}
/*
* == tabelle-zeile-aktiv ==
* Fokussierte Zeile gesondert einfärben.
*/
table.wikitable.tabelle-zeile-aktiv tr:hover td,
table.wikitable.mw-datatable tr:hover td {
background-color: #eaf3ff;
}
@media screen {
/* im Dunkelmodus andere Hintergrundfarbe wählen und Textfarbe überschreiben */
html.skin-theme-clientpref-night table.wikitable.tabelle-zeile-aktiv tr:hover td,
html.skin-theme-clientpref-night table.wikitable.mw-datatable tr:hover td {
background-color: #404142;
color: var(--color-base, #eaecf0);
}
/* Korrektur der Linkfarbe rückgängig machen */
html.skin-theme-clientpref-night table.wikitable.tabelle-zeile-aktiv tr:hover td a,
html.skin-theme-clientpref-night table.wikitable.mw-datatable tr:hover td a {
color: #88a3e8;
}
}
@media screen and (prefers-color-scheme: dark) {
html.skin-theme-clientpref-os table.wikitable.tabelle-zeile-aktiv tr:hover td,
html.skin-theme-clientpref-os table.wikitable.mw-datatable tr:hover td {
background-color: #404142;
color: var(--color-base, #eaecf0);
}
html.skin-theme-clientpref-os table.wikitable.tabelle-zeile-aktiv tr:hover td a,
html.skin-theme-clientpref-os table.wikitable.mw-datatable tr:hover td a {
color: #88a3e8;
}
}
/*
* == tabelle-kopf-fixiert ==
* Fixiert die erste Zeile mit th-Zellen bei vertikalem Scrollen.
*/
@media screen and (min-width: 721px) {
/* Zeile mit th-Zellen und Kopfzelle der Zählspalte (tabelle-zaehler) fixieren */
table.wikitable.tabelle-kopf-fixiert th,
table.wikitable.tabelle-kopf-fixiert tr.tabelle-zaehler-kopf::before {
position: sticky;
top: 0;
z-index: 12;
}
/* border aufbrechen und linke und untere Rahmen ausblenden */
table.wikitable.tabelle-kopf-fixiert {
border-collapse: separate;
border-spacing: 0;
border-bottom-style: none;
border-left-style: none;
}
/* doppelte Zellrahmen oben und rechts ausblenden */
table.wikitable.tabelle-kopf-fixiert th,
table.wikitable.tabelle-kopf-fixiert td {
border-right-style: none;
border-top-style: none;
}
}
/* sticky header des Skins Vector 2022 berücksichtigen */
@media screen and (min-width: 1000px) {
html.client-js.vector-sticky-header-enabled table.wikitable.tabelle-kopf-fixiert:not(.tabelle-spalte-fixiert) th,
html.client-js.vector-sticky-header-enabled table.wikitable.tabelle-kopf-fixiert:not(.tabelle-spalte-fixiert) tr.tabelle-zaehler-kopf::before {
top: 3.125rem;
}
}
/*
* == tabelle-spalte-fixiert ==
* Fixiert die erste Spalte mit th-Zellen oder die Zählspalte (s. tabelle-zaehler) bei horizontalem Scrollen.
*/
/* border aufbrechen und linke und untere Rahmen ausblenden */
.tabelle-container table.wikitable.tabelle-spalte-fixiert {
border-collapse: separate;
border-spacing: 0;
border-left-style: none;
border-bottom-style: none;
}
/* Spalte mit th-Zellen in Kopf- und Inhaltszeilen fixieren */
.tabelle-container table.wikitable.tabelle-spalte-fixiert:not(.tabelle-zaehler).sortable thead th:first-child,
.tabelle-container table.wikitable.tabelle-spalte-fixiert:not(.tabelle-zaehler).sortable tbody th,
.tabelle-container table.wikitable.tabelle-spalte-fixiert:not(.tabelle-zaehler):not(.sortable) tr:first-child th:first-child,
.tabelle-container table.wikitable.tabelle-spalte-fixiert:not(.tabelle-zaehler):not(.sortable) tr:not(:first-child) th {
position: sticky;
left: 0;
border-right-style: solid;
}
/* erste Zelle oben links mit höherem z-index, damit sie sowohl bei horizontalem als auch vertikalem Scrollen sichtbar bleibt */
.tabelle-container table.wikitable.tabelle-spalte-fixiert:not(.tabelle-zaehler).sortable thead th:first-child,
.tabelle-container table.wikitable.tabelle-spalte-fixiert:not(.tabelle-zaehler):not(.sortable) tr:first-child th:first-child,
.tabelle-container table.wikitable.tabelle-spalte-fixiert.tabelle-zaehler.sortable thead tr:not(.tabelle-zaehler-kein)::before,
.tabelle-container table.wikitable.tabelle-spalte-fixiert.tabelle-zaehler:not(.sortable) tr:first-child::before {
z-index: 13;
}
/* doppelte Zellrahmen oben und rechts ausblenden */
.tabelle-container table.wikitable.tabelle-spalte-fixiert th,
.tabelle-container table.wikitable.tabelle-spalte-fixiert td {
border-right-style: none;
border-top-style: none;
}
/* linken Rahmen der ersten Zelle rechts neben der fixierten Zelle ausblenden, da sonst doppelt */
.tabelle-container table.wikitable.tabelle-spalte-fixiert:not(.tabelle-zaehler) th:nth-child(2),
.tabelle-container table.wikitable.tabelle-spalte-fixiert:not(.tabelle-zaehler) td:nth-child(2),
.tabelle-container table.wikitable.tabelle-spalte-fixiert.tabelle-zaehler th:first-child,
.tabelle-container table.wikitable.tabelle-spalte-fixiert.tabelle-zaehler td:first-child {
border-left-style: none;
}
/* Anpassungen für fixierten Tabellenkopf (tabelle-kopf-fixiert) */
@media screen and (min-width: 721px) {
/* kein oberer Tabellenrand, da sonst doppelt */
.tabelle-container table.wikitable.tabelle-spalte-fixiert.tabelle-kopf-fixiert {
border-top-style: none;
}
/* oberen Rahmen der horizontal fixierten Zelle einblenden */
.tabelle-container table.wikitable.tabelle-spalte-fixiert.tabelle-kopf-fixiert.sortable thead th,
.tabelle-container table.wikitable.tabelle-spalte-fixiert.tabelle-kopf-fixiert:not(.sortable) tr:first-child th {
border-top-style: solid;
}
/* oberen Rahmen der Titelzelle der Zählspalte (tabelle-zaehler) einblenden */
.tabelle-container table.wikitable.tabelle-spalte-fixiert.tabelle-kopf-fixiert.tabelle-zaehler.sortable thead tr:not(.tabelle-zaehler-kein)::before,
.tabelle-container table.wikitable.tabelle-spalte-fixiert.tabelle-kopf-fixiert.tabelle-zaehler:not(.sortable) tr:first-child::before {
border-top: 1px solid var(--dewiki-rahmenfarbe1);
}
}
/* Zählspalte (tabelle-zaehler) fixieren und Rahmen setzen */
.tabelle-container table.wikitable.tabelle-spalte-fixiert.tabelle-zaehler tr:not(.tabelle-zaehler-kein)::before {
position: sticky;
left: 0;
border: 1px solid var(--dewiki-rahmenfarbe1);
border-top-style: none;
}
/*
* == tabelle-zaehler ==
* Spalte mit Zählvariable vor allen anderen Spalten der Tabelle einfügen.
*/
/* Zähler am Tabellenbeginn zurücksetzen */
table.wikitable.tabelle-zaehler {
counter-reset: tabZaehler;
}
/* zusätzliche Spalte erzeugen */
table.wikitable.tabelle-zaehler tr::before {
display: table-cell;
padding: .2em .4em;
text-align: right;
vertical-align: inherit;
background-color: var(--dewiki-hintergrundfarbe5);
content: "";
}
/* toptextcells der Tabelle auch auf Zählspalte übertragen */
table.wikitable.toptextcells.tabelle-zaehler tr::before {
vertical-align: top;
}
/* Zellränder ergänzen */
table.wikitable.tabelle-zaehler:not(.tabelle-kopf-fixiert) tr:not(.tabelle-zaehler-kein)::before {
border-top: 1px solid var(--dewiki-rahmenfarbe1);
}
table.wikitable.tabelle-zaehler.tabelle-kopf-fixiert tr:not(.tabelle-zaehler-kein)::before {
border-left: 1px solid var(--dewiki-rahmenfarbe1);
border-bottom: 1px solid var(--dewiki-rahmenfarbe1);
}
/* Zähler erhöhen */
table.wikitable.tabelle-zaehler:not(.sortable) tbody tr:not(:first-child):not(.tabelle-zaehler-auslassen):not(.tabelle-zaehler-kein),
table.wikitable.tabelle-zaehler.sortable tbody tr:not(.tabelle-zaehler-auslassen):not(.tabelle-zaehler-kein) {
counter-increment: tabZaehler;
}
/* Zählspalte den Inhalt zuweisen */
table.wikitable.tabelle-zaehler:not(.sortable) tbody tr:not(:first-child):not(.tabelle-zaehler-versteckt):not(.tabelle-zaehler-kein)::before,
table.wikitable.tabelle-zaehler.sortable tbody tr:not(.tabelle-zaehler-versteckt):not(.tabelle-zaehler-kein)::before {
content: attr(data-zaehler-vor) counter(tabZaehler) attr(data-zaehler-nach);
}
/* Kopfzelle der Zählspalte den Inhalt zuweisen */
table.wikitable.tabelle-zaehler:not(.sortable) tbody tr[data-zaehler-spalte]:first-child::before,
table.wikitable.tabelle-zaehler.sortable thead tr[data-zaehler-spalte]:first-child::before {
font-weight: bold;
content: attr(data-zaehler-spalte);
}
/* Standard-Hintergrundfarben der Zeile berücksichtigen */
table.wikitable.tabelle-zaehler tr.hintergrundfarbe-basis::before {
background-color: var(--dewiki-hintergrundfarbe-basis);
}
table.wikitable.tabelle-zaehler tr.hintergrundfarbe1::before {
background-color: var(--dewiki-hintergrundfarbe1);
}
table.wikitable.tabelle-zaehler tr.hintergrundfarbe2::before {
background-color: var(--dewiki-hintergrundfarbe2);
}
table.wikitable.tabelle-zaehler tr.hintergrundfarbe3::before {
background-color: var(--dewiki-hintergrundfarbe3);
}
table.wikitable.tabelle-zaehler tr.hintergrundfarbe4::before {
background-color: var(--dewiki-hintergrundfarbe4);
}
table.wikitable.tabelle-zaehler tr.hintergrundfarbe6::before {
background-color: var(--dewiki-hintergrundfarbe6);
}
table.wikitable.tabelle-zaehler tr.hintergrundfarbe7::before {
background-color: var(--dewiki-hintergrundfarbe7);
}
table.wikitable.tabelle-zaehler tr.hintergrundfarbe8::before {
background-color: var(--dewiki-hintergrundfarbe8);
}
table.wikitable.tabelle-zaehler tr.hintergrundfarbe9::before {
background-color: var(--dewiki-hintergrundfarbe9);
}
/*
* == prettytable ==
* Frühere Alternative zu wikitable, für noch nicht umgestellte Inhalte beibehalten.
*/
.prettytable {
background-color: #f8f9fa;
border: 1px solid #a2a9b1;
border-collapse: collapse;
color: black;
margin: 1em 0;
}
table.prettytable > * > tr > th,
table.prettytable > * > tr > td {
border: 1px solid #a2a9b1;
padding: .2em .4em;
}
table.prettytable > * > tr > th {
text-align: center;
}
table.prettytable > caption {
font-weight: bold;
}