Zum Inhalt springen

Vorlage:Tabellenstile/styles.css

aus AufEinWort, der freien Forschung
Dies ist die aktuelle Version dieser Seite, zuletzt bearbeitet am 31. März 2026 um 08:58 Uhr durch Nikolaos (Diskussion | Beiträge) (Die Seite wurde neu angelegt: „ →* == 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-…“).
(Unterschied) ← Nächstältere Version | Aktuelle Version (Unterschied) | Nächstjüngere Version → (Unterschied)
/*
 * == 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;
}