Zum Inhalt springen

Vorlage:Tabellenstile/styles

aus AufEinWort, der freien Forschung
< Vorlage:Tabellenstile
Dies ist die aktuelle Version dieser Seite, zuletzt bearbeitet am 15. September 2026 um 05:26 Uhr durch Nikolaos (Diskussion | Beiträge) (Textersetzung - „<noinclude>{{Wikipedia.de Struktur Vorlage}}</noinclude>“ durch „<noinclude>{{Heim-gast Vorlage}}</noinclude>“).
(Unterschied) ← Nächstältere Version | Aktuelle Version (Unterschied) | Nächstjüngere Version → (Unterschied)

Wikipedia.de Vorlage: Tabellenstile/styles

[Verwendung]   [CSS bearbeiten]

Diese Seite dokumentiert TemplateStyles betreffend Vorlage:Tabellenstile.
Sie sind auf dieser Seite aktiviert.

CSS

/*
 * == 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;
}

Kopiervorlage

<templatestyles src="Tabellenstile/styles.css" />

Funktion

Nicht mehr für alle Seiten angebotene Dekorationen von Tabellen sollen weiterhin über den Klassennamen verfügbar gemacht werden.

Klassen

.tabelle-
Präfix für alle lokalen Neudefinitionen ab 2022
.tabelle-container
Tabelle bei Bedarf horizontal und vertikal scrollbar machen
Der margin der Tabelle wird auf den Container übertragen.
.tabelle-kopf-fixiert
Tabellenkopf beim Scrollen am oberen Rand fixieren
Die Klasse wirkt auf sämtliche th-Elemente einer Tabelle, also auch auf der ersten Kopfzeile nachfolgend angeordnete Kopfzellen. Die Separierung der Zellenränder dient zur Vermeidung von unschönen Darstellungen durch die Definition des z-Index.
.tabelle-spalte-fixiert
Erste Kopfzellen je Zeile beim Scrollen am linken Rand fixieren
Die Klasse wirkt auf das erste th-Element je Zeile einer Tabelle. Die Separierung der Zellenränder dient zur Vermeidung von unschönen Darstellungen durch die Definition des z-Index.
.tabelle-zaehler
automatisch Zeilennummer voranstellen
Die Klasse bewirkt, dass vor der eigentlichen definierten ersten Tabellenspalte eine weitere Spalte eingefügt wird, die eine automatisch hochgezählte Zeilennummer enthält. Mit zusätzlichen Klassen und Attributen an der jeweiligen Zeile kann das Standardverhalten beeinflusst werden.
Hilfe:Tabellen/Zählung
.tabelle-zeile-aktiv (.mw-datatable)
Datenzeile am Mauszeiger hervorheben
Die Klasse mw-datatable wurde Mitte 2021 durch MediaWiki nicht mehr angeboten – phab:T287997.
Hilfe:Tabellen
Sie war 2011/2012 global bereitgestellt worden, wäre jedoch eigentlich nur für internen Gebrauch auf durch MediaWiki generierte Spezialseiten gedacht gewesen und nicht zur Verwendung im Wikitext der Projekte. Ab März 2022 Angleichung an Namensschema für Tabellenstile mit Präfix tabelle-.
.prettytable
Tabelle allgemein aufhübschen; Rahmenlinien und Abstände
Diese Klasse war 2005/2006 lokal in der deutschsprachigen Wikipedia eingeführt worden. MediaWiki:Common.css, zuvor Vorlage:prettytable.
Sie wurde global durch wikitable abgelöst und soll perspektivisch überall wegfallen. Sofern Seiten noch nicht auf gleichartiges Erscheinungsbild mittels wikitable umgerüstet wurden, kann diese Spezifikation in die Seite eingebunden werden.
Hilfe:Tabellen/prettytable

Kompatibilität

Die wesentlichen Spezifikationen sind synchronisiert mit althergebrachten Formaten in der deutschsprachigen Wikipedia bzw. durch MediaWiki.

Beispiele

Siehe jeweils die verlinkten Projektseiten.

Abgerufen von „https://aufeinwort.info/w/index.php?title=Vorlage:Tabellenstile/styles&oldid=256238“