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;
	display: block;
	overflow: auto;
}
table.scroll {
	width: 100%;
	background-color: #fff;
}
table.scroll thead {
	width: 100%;
	background: #5dd39e;
}
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 #eee;
}

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.

Keine Produkte gefunden.

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.

7 Likes

Verfasst am 07.02.2018 Update 24.03.2023

revilodesign oli

jQuery Gauge mousemove – Tutorial

svg Path zum Bild umwandeln / konvertieren

12 Kommentare

Schreibe ein Kommentar zu CSS Table Header Fixed – thead einer Tabelle fixieren

Getulio P Macedo sagt:
7. August 2018 um 1:07 Uhr

Hi, i am from Brasil and liked this code i was looking for something like this, Thanks.

Antworten
Claus sagt:
19. September 2019 um 15:31 Uhr

Das funktioniert sehr gut. Eine Sache die mir gefiel, war die Tatsache, dass sich die Tabelle bis in die mobile Ansicht nach Rechts und Links scrollen lässt. Dabei ist mir aber aufgefallen, dass dafür der wrapper div den overflow:auto haben muss. Der overflow hängt im Beispiel aber an der class example-box. Bei mir habe ich den wrapper daher auf:
wrapper {
display:block;
overflow:auto;
}
gesetzt und das funktioniert dann auch Responsive wunderbar.

Antworten
- admin sagt:
  19. September 2019 um 15:48 Uhr
  
  Hi Claus,
  
  danke für dein Kommentar & deine Anregung. Ich habe deine Anmerkungen in meinem obigen Beispiel hinzugefügt.
  
  Lg Oli
  
  Antworten
JOSE H sagt:
9. Oktober 2019 um 22:31 Uhr

Spanisch (Original): Agregar esta seccion al CSS para que el texto no se desborde de las columnas

Deutsch (Übersetzung): Fügen Sie diesen Abschnitt zum CSS hinzu, damit der Text nicht aus den Spalten überläuft.

table.fixed_header{
-ms-word-break: break-all;
word-break: break-all;
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}

Antworten
Doberfrau sagt:
22. Juli 2020 um 11:10 Uhr

Funktioniert ausgezeichnet, solange man nicht mit colspan oder rowspan arbeiten muss – dann zerschießt es erwartungsgemäß wieder alles. Wie einfach wäre es, wenn mit HTML5 endlich das schon seit ewigen Zeiten angeforderte Attribut für thead umgesetzt wäre, mit dem man den Header einer Tabelle fixieren könnte, unabhängig davon, wie man den Body aufbaut. Tabellenkalkulationen zeigen seit inzwischen mehr als 25 Jahren, dass das geht …

Antworten
- sedistok sagt:
  17. Mai 2022 um 18:42 Uhr
  
  . . . bekannter Softwareentwickler-Spruch: „we are proud to be, completely Table-Free“.
  Gemeint ist: „tables“ sind etwas für html-Frickler, nichts für Programmierer.
  
  Antworten
  - admin sagt:
    18. Mai 2022 um 10:07 Uhr
    
    Hey sedistok,
    
    und dennoch haben Tabellen Ihre Daseinsberechtigungen und anscheinend hast du meinen Beitrag ja irgendwie gefunden 😉
    
    LG Oli
    
    Antworten
- derSESO sagt:
  23. Juni 2022 um 10:07 Uhr
  
  Hallo,
  gibt es eine Lösung dafür?
  habe auch einen Tabellenkopf über zwei Zeilen und die zweite Zeile mag er nicht. 🙁
  
  Antworten
rahrens@t-online.de sagt:
18. Mai 2022 um 19:13 Uhr

Ich bekomme die Umsetzung auf mein Beispiel nicht zum Laufen.
Ich habe eine Musiktabelle mit mehreren Tausend Einträgen.
Die nachfolgenden Beiden Zeilen sind der Kopf, der beim Scrollen stehen bleiben soll.
Ich habe schon diverse Einträge aus verschiedenen Foren probiert, aber immer mit dem Erfolg, dass die Ganze Tabelle incl Kopf scrollt.

Folgende 800 Einträge wurden gefunden für Interpret: Barber
Interpret Album Anzahl Medium Cover Label Best-Nr Abgeben Aktion

Über Hilfe, würde ich mich sehr freuen, da ich langsam nicht mehr weiter weiss.

Mfg rahrens@t-online.de

Antworten
Rollo sagt:
20. Mai 2022 um 20:05 Uhr

Hallo,
ich habe das Beispiel ausprobiert, aber ohne Erfolg. Wie auch schon vorher dutzend andere.
Ich bekomme es einfach nicht hin, dass der Tabellenkopf fest steht und nur der Inhalt scrollt.
Hier ist einmal der Auszug Stylesheet und die Tabellenerzeugung.
Hat jemand noch eine Idee, warum das nicht funktioniert?

Mein Code:
echo „“;
div.wrapper {
padding: 20px;
display: block;
overflow: auto;
}
table.scroll {
width: 100%;
background-color: #fff;
}
table.scroll thead {
width: 100%;
background: #5dd39e;
}
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 #eee;
}
„;

// —————————————————
// Ausgabe-Tabelle wenn Datensätze vorhanden
// —————————————————
if ($row_cnt > 0) {
echo „“;
echo „“;
echo „“;
echo „“;
echo „“;
printf(„Folgende %d Einträge wurden gefunden\n“, $row_cnt);
if (!(Empty($suchinterpret)) And (Empty($suchalbum)) )
{
echo „für Interpret: “ . $sinterpret . „“;
}
if (!(Empty($suchalbum)) And (Empty($suchinterpret)) )
{
echo „für Album: „, $stitel, „“;
}
if (!(Empty($suchinterpret)) And !(Empty($suchalbum)) )
{
echo „für Interpret: „, $sinterpret, „“;
echo „und Album: „, $salbum, „“;
}
echo „“;
echo „“;
echo „“;
echo „Interpret„;
echo „Album„;
echo „Anzahl„;
echo „Medium„;
echo „Cover„;
echo „Label„;
echo „Best-Nr„;
echo „Abgeben„;
echo „Aktion„;
echo „“;
echo „“;
echo „“;
// ———————–
// Ausgabe-Tabelle Daten
// ———————–

while ($row = mysqli_fetch_object ($result))
{
echo „“;
$row->Interpret = htmlentities($row->Interpret);
if (empty($row->Interpret)) $row->Interpret = „“;
echo „“, $row->Interpret, „“;
if (empty($row->Album)) $row->Album = „“;
echo „“, $row->Album, „“;
if (empty($row->Anzahl)) $row->Anzahl = „“;
echo „“, $row->Anzahl, „“;
if (empty($row->Medium)) $row->Medium = „“;
echo „“, $row->Medium, „“;
if (empty($row->Cover)) $row->Cover = „“;
echo „“, $row->Cover, „“;
if (empty($row->Label)) $row->Label = „“;
echo „“, $row->Label, „“;
if (empty($row->BestNr)) $row->BestNr = „“;
echo „“, $row->BestNr, „“;
if (empty($row->Abgeben)) $row->Abgeben = „“;
echo „“, $row->Abgeben, „“;
echo “

Cover>
Album>

„;
echo „“;
}
echo „“;
echo „“;
echo „“;

Antworten
- admin sagt:
  2. Juni 2022 um 11:55 Uhr
  
  Hey Rollo,
  
  was soll ich dir sagen ohne deinen Code zu sehen. In meinem Beispiel funktioniert es. Schreib mir eine E-Mail. Vielleicht kann ich dir helfen.
  
  LG Oli
  
  Antworten
Alan sagt:
26. Oktober 2022 um 11:12 Uhr

@Rollo: das kann auch nicht klappen, weil du mit deinen Echo s nur deinen Text ausgiebst.. und keine html Syntax. Da klappen dann auch keine Stylesheets.

Antworten