CSS Table Header Fixed – thead einer Tabelle fixieren

In diesem Blogeintrag zeige ich Euch wie Ihr nur mit CSS den Header einer HTML Tabelle fixieren könnt ohne dass sich dieser beim scrollen mitbewegt. Dies macht gerade dann Sinn, wenn man Tabellen mit vielen Einträgen übersichtlich darstellen möchte ohne die Webseite unnötig in die Länge zu ziehen.

Beispiel einer Tabelle mit fixierten thead ohne Javascript

  • HTML
  • CSS
Name Vorname Beruf Alter
Müller Marie Künstlerin 26
Meier Stefan Chemiker 52
Schmidt Sabrine Studentin 38
Mustermann Max Lehrer 41
Müller Marie Künstlerin 26
Meier Stefan Chemiker 52
Schmidt Sabrine Studentin 38
Mustermann Max Lehrer 41
Müller Marie Künstlerin 26
Meier Stefan Chemiker 52
Schmidt Sabrine Studentin 38
Mustermann Max Lehrer 41
div.wrapper {
	padding:20px;
}
table.scroll {
	width: 100%;
	background-color: #fff;
}
table.scroll thead {
	width: 100%;
	background: #FC6822;
}
table.scroll thead tr:after {
	content: '';
	overflow-y: scroll;
	visibility: hidden;
}
table.scroll thead th {
	flex: 1 auto;
	display: block;
	color: #fff;
}
table.scroll tbody {
	display: block;
	width: 100%;
	overflow-y: auto;
	height: auto;
	max-height: 200px;
}
table.scroll thead tr,
table.scroll tbody tr {
	display: flex;
}
table.scroll tbody tr td {
	flex: 1 auto;
	word-wrap: break;
}
table.scroll thead tr th,
table.scroll tbody tr td {
	width: 25%;
	padding: 5px;
	text-align-left;
	border-bottom: 1px solid rgba(0,0,0,0.3);
}
Name Vorname Beruf Alter
Müller Marie Künstlerin 26
Meier Stefan Chemiker 52
Schmidt Sabrine Studentin 38
Mustermann Max Lehrer 41
Müller Marie Künstlerin 26
Meier Stefan Chemiker 52
Schmidt Sabrine Studentin 38
Mustermann Max Lehrer 41
Müller Marie Künstlerin 26
Meier Stefan Chemiker 52
Schmidt Sabrine Studentin 38
Mustermann Max Lehrer 41

Sicherlich gibt es noch andere Möglichkeiten den thead optisch zu fixieren. Aber die meisten sind HTML-Technisch gesehen nicht das gelbe vom Ei. Daher habe ich mit ein wenig Recherche und Eigengrips diese paar Zeilen CSS zusammengefasst.

So erstellt Ihr eine Tabelle mit einem festen Header

Eigentlich müsst Ihr nichts anderes tun, als eine Tabelle mit thead und tbody und den entsprechenden Rows zu erstellen. Anschließend kopiert Ihr den folgenden Code in Eure stylesheets:

table.scroll thead tr:after {
	content: '';
	overflow-y: scroll;
	visibility: hidden;
}
table.scroll thead th {
	flex: 1 auto;
	display: block;
}
table.scroll tbody {
	display: block;
	width: 100%;
	overflow-y: auto;
	height: auto;
	max-height: 200px;
}
table.scroll thead tr,
table.scroll tbody tr {
	display: flex;
}
table.scroll tbody tr td {
	flex: 1 auto;
	word-wrap: break;
}

Anschließend solltet Ihr in der Tabelle scrollen können ohne das sich der Header aus dem Sichtbereich bewegt. Die Höhe könnt ihr in der Klasse table.scroll tbody anpassen.

oliver Ich heisse Oli und komme aus dem wuseligen Berlin. Meine Leidenschaft für Webseiten hält seit mehr 10 Jahren an. Dabei ist es egal ob ich kleinere oder größere Projekte umsetze - ich hänge mich in jedes Projekt mit voller Leidenschaft rein und versuche mich dabei immer wieder neu zu entdecken und neue Ideen umzusetzen.

Hinterlasse ein Kommentar

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.