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:
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.
Code:
<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.