Wie man in HTML Tabellen nur den tbody scrollt
HTML Tabellen nur tbody scrollen
Ich habe es bereits in meinem letzten Tabellen Tutorial angesprochen: Um in allen Browsern den tbody Bereich scrollen zu können, muß ganz gewaltig getrickst werden. Und damit fangen wir heute an: Zuerst benötigen wir eine Standardtabelle mit einem thead, einem tfoot und einem tbody Bereich:
Beispielcode HTML:
<pre><html>
<body>
<table>
<thead>
<tr>
<th>Überschrift 1</th>
<th>Überschrift 2</th>
<th>Überschrift 3</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Fußnote 1</th>
<th>Fußnote 2</th>
<th>Fußnote 3</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Zelle 1</td>
<td>Zelle 2</td>
<td>Zelle 3</td>
</tr>
</tbody>
</table>
</body>
</html></pre>
Wir müssen, um tbody zu scrollen eine weitere Tabelle in den tbody Bereich einfügen. Dazu ist der erste Schritt, die drei td Zellen zu einer einzigen zusammenzufassen:
Beispielcode HTML:
<pre><html>
<body>
<table>
<thead>
<tr>
<th>Überschrift 1</th>
<th>Überschrift 2</th>
<th>Überschrift 3</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Fußnote 1</th>
<th>Fußnote 2</th>
<th>Fußnote 3</th>
</tr>
</tfoot>
<tbody>
<tr>
<td <span style="font-size: 16px;font-weight: bold; color: #ff0000;">colspan="3"</span>>Zelle 1</td>
</tr>
</tbody>
</table>
</body>
</html></pre>
Mit colspan=“3″ teilen wir der Tabelle mit, daß sie die drei Zellen zu einer einzigen zusammenfügen soll.
Nun machen wir weiter: Wir weisen der Tabelle eine id zu, damit wir die Tabelle per CSS formatieren können. Nennen wir die Tabelle outertab (für die äußere Tabelle):
Beispielcode HTML:
<pre><html>
<body>
<table <span style="font-size: 16px;font-weight: bold; color: #ff0000;">id="outertab"</span>>
<thead>
<tr>
<th>Überschrift 1</th>
<th>Überschrift 2</th>
<th>Überschrift 3</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Fußnote 1</th>
<th>Fußnote 2</th>
<th>Fußnote 3</th>
</tr>
</tfoot>
<tbody>
<tr>
<td colspan="3">Zelle 1</td>
</tr>
</tbody>
</table>
</body>
</html></pre>
Nun möchte ich per CSS festlegen, daß die Tabelle einen Rahmen hat, der 1 Pixel breit und schwarz ist.
Die Tabelle soll 20 Pixel von oben und links versetzt werden (ich möchte sie etwas freistehend haben), 70% breit und 400 Pixel hoch:
Beispielcode HTML:
<pre><html>
<strong><head>
<span style="font-size: 16px;font-weight: bold; color: #ff0000;"><style type="text/css">
#outertab {
border: 1px #000000 solid;
position: absolute;
top: 20px;
left: 20px;
width:70%;
height: 400px;
}
</style></span></strong>
</head>
<body>
<table id="outertab">
<thead>
<tr>
<th>Überschrift 1</th>
<th>Überschrift 2</th>
<th>Überschrift 3</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Fußnote 1</th>
<th>Fußnote 2</th>
<th>Fußnote 3</th>
</tr>
</tfoot>
<tbody>
<tr>
<td colspan="3">Zelle 1</td>
</tr>
</tbody>
</table>
</body>
</html></pre>
Nun müssen wir in den tbody Bereich einen Div Container einfügen. Diesem div Container geben ir eine id innerdiv:
Beispielcode HTML:
<pre><html>
<head>
<style type="text/css">
#outertab {
border: 1px #000000 solid;
position: absolute;
top: 20px;
left: 20px;
width:70%;
height: 400px;
}
</style>
</head>
<body>
<table id="outertab">
<thead>
<tr>
<th>Überschrift 1</th>
<th>Überschrift 2</th>
<th>Überschrift 3</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Fußnote 1</th>
<th>Fußnote 2</th>
<th>Fußnote 3</th>
</tr>
</tfoot>
<tbody>
<tr>
<td colspan="3">
<span style="font-size: 16px;font-weight: bold; color: #ff0000;"><div id="innerdiv">
</div></span>
</td>
</tr>
</tbody>
</table>
</body>
</html></pre>
Der div Container soll 330 Pixel hoch (etwa 70px kleiner als die Tabelle), 100% breit und als overflow den Wert auto haben:
Beispielcode HTML:
<pre><html>
<head>
<style type="text/css">
#outertab {
border: 1px #000000 solid;
position: absolute;
top: 20px;
left: 20px;
width:70%;
height: 400px;
}
<span style="font-size: 16px;font-weight: bold; color: #ff0000;">#innerdiv {
width: 100%;
height: 330px;
overflow:auto;
}</span>
</style>
</head>
<body>
<table id="outertab">
<thead>
<tr>
<th>Überschrift 1</th>
<th>Überschrift 2</th>
<th>Überschrift 3</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Fußnote 1</th>
<th>Fußnote 2</th>
<th>Fußnote 3</th>
</tr>
</tfoot>
<tbody>
<tr>
<td colspan="3">
<div id="innerdiv">
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html></pre>
Nun möchte ich in den Div-Container eine zweite Tabelle setzen. Dieser Tabelle möchte ich die id innertab zuweisen. Diese Tabelle sollte nun zu Testzwecken schon mehrere tr Zeilen beinhalten. Wir wollen schließlich die Tabelle auch scrollen:
Beispielcode HTML:
<pre><html>
<head>
<style type="text/css">
#outertab {
border: 1px #000000 solid;
position: absolute;
top: 20px;
left: 20px;
width:70%;
height: 400px;
}
#innerdiv {
width: 100%;
height: 330px;
overflow:auto;
}
</style>
</head>
<body>
<table id="outertab">
<thead>
<tr>
<th>Überschrift 1</th>
<th>Überschrift 2</th>
<th>Überschrift 3</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Fußnote 1</th>
<th>Fußnote 2</th>
<th>Fußnote 3</th>
</tr>
</tfoot>
<tbody>
<tr>
<td colspan="3">
<div id="innerdiv">
<span style="font-size: 16px;font-weight: bold; color: #ff0000;"><table id="innertab">
<tr>
<td>Zelle 1</td>
<td>Zelle 2</td>
<td>Zelle 3</td>
</tr>
<tr>
<td>Zelle 1</td>
<td>Zelle 2</td>
<td>Zelle 3</td>
</tr>
<tr>
<td>Zelle 1</td>
<td>Zelle 2</td>
<td>Zelle 3</td>
</tr>
<tr>
<td>Zelle 1</td>
<td>Zelle 2</td>
<td>Zelle 3</td>
</tr>
<tr>
<td>Zelle 1</td>
<td>Zelle 2</td>
<td>Zelle 3</td>
</tr>
<tr>
<td>Zelle 1</td>
<td>Zelle 2</td>
<td>Zelle 3</td>
</tr>
<tr>
<td>Zelle 1</td>
<td>Zelle 2</td>
<td>Zelle 3</td>
</tr>
<tr>
<td>Zelle 1</td>
<td>Zelle 2</td>
<td>Zelle 3</td>
</tr>
<tr>
<td>Zelle 1</td>
<td>Zelle 2</td>
<td>Zelle 3</td>
</tr>
<tr>
<td>Zelle 1</td>
<td>Zelle 2</td>
<td>Zelle 3</td>
</tr>
<tr>
<td>Zelle 1</td>
<td>Zelle 2</td>
<td>Zelle 3</td>
</tr>
<tr>
<td>Zelle 1</td>
<td>Zelle 2</td>
<td>Zelle 3</td>
</tr>
<tr>
<td>Zelle 1</td>
<td>Zelle 2</td>
<td>Zelle 3</td>
</tr>
<tr>
<td>Zelle 1</td>
<td>Zelle 2</td>
<td>Zelle 3</td>
</tr>
<tr>
<td>Zelle 1</td>
<td>Zelle 2</td>
<td>Zelle 3</td>
</tr>
<tr>
<td>Zelle 1</td>
<td>Zelle 2</td>
<td>Zelle 3</td>
</tr>
</table></span>
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html></pre>
Diese innere Tabelle sollte eine Höhe von 330 Pixel und eine Breite von 100% haben. Der Rand sollte auf 0px gesetzt werden (ist aber kein muss):
Beispielcode HTML:
<pre><html>
<head>
<style type="text/css">
#outertab {
border: 1px #000000 solid;
position: absolute;
top: 20px;
left: 20px;
width:70%;
height: 400px;
}
#innerdiv {
width: 100%;
height: 330px;
overflow:auto;
}
<span style="font-size: 16px;font-weight: bold; color: #ff0000;">#innertab {
border: 0px;
width: 100%;
height: 330px;
}</span>
</style>
</head>
<body>
<table id="outertab">
<thead>
<tr>
<th>Überschrift 1</th>
<th>Überschrift 2</th>
<th>Überschrift 3</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Fußnote 1</th>
<th>Fußnote 2</th>
<th>Fußnote 3</th>
</tr>
</tfoot>
<tbody>
<tr>
<td colspan="3">
<div id="innerdiv">
<strong><table id="innertab">
<tr>
<td>Zelle 1</td>
<td>Zelle 2</td>
<td>Zelle 3</td>
</tr>
<tr>
<td>Zelle 1</td>
<td>Zelle 2</td>
<td>Zelle 3</td>
</tr>
<tr>
<td>Zelle 1</td>
<td>Zelle 2</td>
<td>Zelle 3</td>
</tr>
<tr>
<td>Zelle 1</td>
<td>Zelle 2</td>
<td>Zelle 3</td>
</tr>
<tr>
<td>Zelle 1</td>
<td>Zelle 2</td>
<td>Zelle 3</td>
</tr>
<tr>
<td>Zelle 1</td>
<td>Zelle 2</td>
<td>Zelle 3</td>
</tr>
<tr>
<td>Zelle 1</td>
<td>Zelle 2</td>
<td>Zelle 3</td>
</tr>
<tr>
<td>Zelle 1</td>
<td>Zelle 2</td>
<td>Zelle 3</td>
</tr>
<tr>
<td>Zelle 1</td>
<td>Zelle 2</td>
<td>Zelle 3</td>
</tr>
<tr>
<td>Zelle 1</td>
<td>Zelle 2</td>
<td>Zelle 3</td>
</tr>
<tr>
<td>Zelle 1</td>
<td>Zelle 2</td>
<td>Zelle 3</td>
</tr>
<tr>
<td>Zelle 1</td>
<td>Zelle 2</td>
<td>Zelle 3</td>
</tr>
<tr>
<td>Zelle 1</td>
<td>Zelle 2</td>
<td>Zelle 3</td>
</tr>
<tr>
<td>Zelle 1</td>
<td>Zelle 2</td>
<td>Zelle 3</td>
</tr>
<tr>
<td>Zelle 1</td>
<td>Zelle 2</td>
<td>Zelle 3</td>
</tr>
<tr>
<td>Zelle 1</td>
<td>Zelle 2</td>
<td>Zelle 3</td>
</tr>
</table></strong>
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html></pre>
Zu guter letzt noch ein paar Schönheitsmakulaturen: Die Zellen in der innertab Tabelle sollten schon einen Rand haben.
Beispielcode HTML:
<pre><html>
<head>
<style type="text/css">
#outertab {
border: 1px #000000 solid;
position: absolute;
top: 20px;
left: 20px;
width:70%;
height: 400px;
}
#innerdiv {
width: 100%;
height: 330px;
overflow:auto;
}
#innertab {
border: 0px;
width: 100%;
height: 330px;
}
<span style="font-size: 16px;font-weight: bold; color: #ff0000;">#innertab td{
border: 1px #000000 solid;
}</span>
</style>
</head>
<body>
<table id="outertab">
<thead>
<tr>
<th>Überschrift 1</th>
<th>Überschrift 2</th>
<th>Überschrift 3</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Fußnote 1</th>
<th>Fußnote 2</th>
<th>Fußnote 3</th>
</tr>
</tfoot>
<tbody>
<tr>
<td colspan="3">
<div id="innerdiv">
<table id="innertab">
<tr>
<td>Zelle 1</td>
<td>Zelle 2</td>
<td>Zelle 3</td>
</tr>
<tr>
<td>Zelle 1</td>
<td>Zelle 2</td>
<td>Zelle 3</td>
</tr>
<tr>
<td>Zelle 1</td>
<td>Zelle 2</td>
<td>Zelle 3</td>
</tr>
<tr>
<td>Zelle 1</td>
<td>Zelle 2</td>
<td>Zelle 3</td>
</tr>
<tr>
<td>Zelle 1</td>
<td>Zelle 2</td>
<td>Zelle 3</td>
</tr>
<tr>
<td>Zelle 1</td>
<td>Zelle 2</td>
<td>Zelle 3</td>
</tr>
<tr>
<td>Zelle 1</td>
<td>Zelle 2</td>
<td>Zelle 3</td>
</tr>
<tr>
<td>Zelle 1</td>
<td>Zelle 2</td>
<td>Zelle 3</td>
</tr>
<tr>
<td>Zelle 1</td>
<td>Zelle 2</td>
<td>Zelle 3</td>
</tr>
<tr>
<td>Zelle 1</td>
<td>Zelle 2</td>
<td>Zelle 3</td>
</tr>
<tr>
<td>Zelle 1</td>
<td>Zelle 2</td>
<td>Zelle 3</td>
</tr>
<tr>
<td>Zelle 1</td>
<td>Zelle 2</td>
<td>Zelle 3</td>
</tr>
<tr>
<td>Zelle 1</td>
<td>Zelle 2</td>
<td>Zelle 3</td>
</tr>
<tr>
<td>Zelle 1</td>
<td>Zelle 2</td>
<td>Zelle 3</td>
</tr>
<tr>
<td>Zelle 1</td>
<td>Zelle 2</td>
<td>Zelle 3</td>
</tr>
<tr>
<td>Zelle 1</td>
<td>Zelle 2</td>
<td>Zelle 3</td>
</tr>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html></pre>
Und das rechte heading sollte auf 34% gesetzt werden, da es über dem Scrollbalken sitzt. Hier werden die Zellen um etwa 20 Pixel versetzt. Bei mir sah es besser aus, wenn ich die mittlere Spalte der innertab ebenfalls auf 34% gesetzt habe. Das Endergebnis sähe dann folgendermaßen aus:
Beispielcode HTML:
<pre><html>
<head>
<style type="text/css">
#outertab {
border: 1px #000000 solid;
position: absolute;
top: 20px;
left: 20px;
width:70%;
height: 400px;
}
#innerdiv {
width: 100%;
height: 330px;
overflow:auto;
}
#innertab {
border: 0px;
width: 100%;
height: 330px;
}
#innertab td{
border: 1px #000000 solid;
}
<span style="font-size: 16px;font-weight: bold; color: #ff0000;">th+th+th {width:34%;}
td+td {width:34%;}</span>
</style>
</head>
<body>
<table id="outertab">
<thead>
<tr>
<th>Überschrift 1</th>
<th>Überschrift 2</th>
<th>Überschrift 3</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Fußnote 1</th>
<th>Fußnote 2</th>
<th>Fußnote 3</th>
</tr>
</tfoot>
<tbody>
<tr>
<td colspan="3">
<div id="innerdiv">
<table id="innertab">
<tr>
<td>Zelle 1</td>
<td>Zelle 2</td>
<td>Zelle 3</td>
</tr>
<tr>
<td>Zelle 1</td>
<td>Zelle 2</td>
<td>Zelle 3</td>
</tr>
<tr>
<td>Zelle 1</td>
<td>Zelle 2</td>
<td>Zelle 3</td>
</tr>
<tr>
<td>Zelle 1</td>
<td>Zelle 2</td>
<td>Zelle 3</td>
</tr>
<tr>
<td>Zelle 1</td>
<td>Zelle 2</td>
<td>Zelle 3</td>
</tr>
<tr>
<td>Zelle 1</td>
<td>Zelle 2</td>
<td>Zelle 3</td>
</tr>
<tr>
<td>Zelle 1</td>
<td>Zelle 2</td>
<td>Zelle 3</td>
</tr>
<tr>
<td>Zelle 1</td>
<td>Zelle 2</td>
<td>Zelle 3</td>
</tr>
<tr>
<td>Zelle 1</td>
<td>Zelle 2</td>
<td>Zelle 3</td>
</tr>
<tr>
<td>Zelle 1</td>
<td>Zelle 2</td>
<td>Zelle 3</td>
</tr>
<tr>
<td>Zelle 1</td>
<td>Zelle 2</td>
<td>Zelle 3</td>
</tr>
<tr>
<td>Zelle 1</td>
<td>Zelle 2</td>
<td>Zelle 3</td>
</tr>
<tr>
<td>Zelle 1</td>
<td>Zelle 2</td>
<td>Zelle 3</td>
</tr>
<tr>
<td>Zelle 1</td>
<td>Zelle 2</td>
<td>Zelle 3</td>
</tr>
<tr>
<td>Zelle 1</td>
<td>Zelle 2</td>
<td>Zelle 3</td>
</tr>
<tr>
<td>Zelle 1</td>
<td>Zelle 2</td>
<td>Zelle 3</td>
</tr>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html></pre>
Wer die th+th+th Notation nicht kennt: mit th+th wird das zweite heading angesprochen. Mit th+th+th das Dritte usw.
Nun sieht die Tabelle in allen Browsern gleich aus und der tbody Bereich ist scrollbar. Ihr könnt mit dem Ergebnis ein wenig herumexperimentieren. Ich habe mir viele Lösungswege angesehen, aber dieser ist wirklich der einzige, der in fast allen Browsern das gleiche Ergebnis liefert.
Ihr habt hier allerdings einen Nachteil: Der Drucker spielt hier nicht mit. Normalerweise sollte der Drucker auf jeder neuen Seite den thead und den tfoot Bereich ausdrucken. Um den Drucker ebenfalls zu unterstützen muß nochmals getrickst werden. Aber das zeige ich Euch im nächsten Tabellen Tutorial.
Author: Andreas Lang
Andreas Lang konzentriert sich seit zwei Jahrzehnten auf die Webentwicklung und Webdesign mit dem Schwerpunkt PHP, Laravel und Javascript und betreut seine Kunden mit Herz und Seele in allen Bereichen von Entwicklung, Design, Suchmaschinenoptimierung, IT-Recht, IT-Sicherheit etc.
