nicht angemeldet
Erste Zeile einer Tabelle fixieren
Ich benutze in meiner Anwendung ein Framework, das die HTML Seiten generiert. Auf einer Seite wird eine Tabelle mit ca. 200 Zeilen angezeigt. In der ersten Zeile dieser Tabelle stehen die Überschriften, die ich beim vertikalen Scrollen gerne fixieren möchte. Dazu hatte ich die restlichen Zeilen in eine extra Tabelle ausgelagert und ein Div nach außen gepackt. Etwa so:
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="100">Zelle 11</td>
<td width="200">Zelle 12</td>
<td width="300">Zelle 13</td>
<td width="200">Zelle 14</td>
<td width="100">Zelle 15</td>
<td width="16"></td>
</tr>
<tr>
<td colspan=6>
<div style="height: 100px; overflow: scroll;">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="100">Zelle 11</td>
<td width="200">Zelle 12</td>
<td width="300">Zelle 13</td>
<td width="200">Zelle 14</td>
<td width="100">Zelle 15</td>
</tr>
<tr>
<td width="100">Zelle 11</td>
<td width="200">Zelle 12</td>
<td width="300">Zelle 13</td>
<td width="200">Zelle 14</td>
<td width="100">Zelle 15</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
Das funktioniert auf den ersten Blick so wie es sollte. Nur mein Problem: Das Framework überschreibt die width-Attribute der inneren Tabelle, so dass die Überschriften nicht mehr genau über den einzelnen Spalten stehen. Ich habe an dieser Stelle leider keinerlei Zugriffsmöglichkeiten über das Framework. Und ein nachträgliches Ändern per Javascript möchte ich eigentlich vermeiden.
Die einzige Lösung die ich sehe: Es muss alles in einer Tabelle untergebracht werden. Aber wie kann ich dann die erste Zeile fixieren? Ein Div nur um das erste <tr> kann man leider nicht packen.
-
Hallo Jason,
entweder doch mit JS, oder Du gibst die Tabelle zweimal aus und blendest mit CSS in de oberen Tabelle Alles bis auf die oberste Zeile aus, bei der inneren dann genau umgekehrt.
Bernd
-
Per CSS hört sich definitiv eleganter an. Bin auf dem Gebiet aber nicht ganz so fit. Wie blende ich denn per CSS Tabellenzeilen aus?
-
Mit 2 Tabellen geht es aber auch nicht. Denn es kann sein, dass die Tabelle horizontal gescrollt werden muss. Und da würde dann die Tabelle mit den Überschriften außen vor bleiben.
-
-