nicht angemeldet
Tabelle mit 'fixer' Kopfzeile
Hallo allseits,
es gibt ja die Möglichkeit, mit Hilfe von Stylesheetangaben einzelne Elemente so zu positionieren, daß sie immer eine feste Position haben und auch beim Scrollen stehenbleiben (position:fixed). Ich würde nun gern bei einer Tabelle die Kopfzeile so definieren, daß sie derart stehenbleibt und die Überschriften auch bei einer langen Tabelle immer sichtbar bleiben. Aber ich hab det nicht hingekriegt. Ich habe das sowohl ID-Attribut in das TR-Element aufgenommen als auch versucht, die Kopfzeile in ein DIV-Element einzuschließen, etwa:
<table>
<div id='xx'>
<tr>
<th>...</th>
<th>...</th>
</tr>
</div>
<tr>
<td>...
usw.
Wahrscheinlich ist das Blödsinn. Jedenfalls hat der Browser das ignoriert, wogegen er 'freie' Elemente (außerhalb einer Tabelle) sehr wohl richtig (fix) positioniert.
Gibt es eine Lösung?
Gruß
praetor
-
Hallo Praetor,
habe ich auch schon oft drüber nachgedacht, wann es in HTML endlich Tabellen mit fixen Spaltenüberschriften gibt. Das erspart die Frames...
Man kann das wohl mit JavaScript erreichen. Den Scrollstatus des Fensters abfragen und dann die realtive y-Position des Kopfes bei jeder Bewegung anpassen. Ich habe da auch mal was gesammelt, finde es aber im Moment nicht.
Chris
-
Hallo allseits,
es gibt ja die Möglichkeit, mit Hilfe von Stylesheetangaben einzelne Elemente so zu positionieren, daß sie immer eine feste Position haben und auch beim Scrollen stehenbleiben (position:fixed). Ich würde nun gern bei einer Tabelle die Kopfzeile so definieren, daß sie derart stehenbleibt und die Überschriften auch bei einer langen Tabelle immer sichtbar bleiben. Aber ich hab det nicht hingekriegt. Ich habe das sowohl ID-Attribut in das TR-Element aufgenommen als auch versucht, die Kopfzeile in ein DIV-Element einzuschließen, etwa:
Du kannst nicht einfach Elemente beliebig schachteln.
div hat in table nichts verloren.Benutze zum Gruppieren von tabellenzeilen die dafür vorgesehenen Elemente thead, tfoot, tbody.
Es ist auch (theoretisch) gar nicht nötig, die thead fix zu positionieren. Einfach für tbody eine Größe angeben und dazu noch overflow:auto;
Allerdings verkraften das nur gute Browser.
Der einzige mir bekannte, der überhaupt darauf reagiert, ist der Mozilla. Aber der hat dabei auch noch Probleme (Hintergründe, Rahmen werden nicht mitgescrollt...)
So sieht der Code dann z.B. aus:
<style type="text/css">
<!--
/* ... Style-Sheet-Angaben ... */
table { height:100px; width:800px; border-collapse:collapse; border-spacing:0; }
tbody { height:80px; overflow:auto; }
tr { height:2em; }
th { text-align:left; }
td { border-style:solid; border-color:black; border-width:1px; }
-->
</style></head>
<body>
<table>
<thead>
<tr><th>col 1</th><th>col 2</th><th>col 3</th><th>col 4</th><th>col 5</th></tr>
</thead>
<tbody>
<tr><td>col 1 row 01</td><td>col 2 row 01</td><td>col 3 row 01</td><td>col 4 row 01</td><td>col 5 row 01</td></tr>
<tr><td>col 1 row 02</td><td>col 2 row 02</td><td>col 3 row 02</td><td>col 4 row 02</td><td>col 5 row 02</td></tr>
<!-- hier noch zig mehr Zeilen -->
</tbody>
</table>Andreas
<table>
<div id='xx'>
<tr>
<th>...</th>
<th>...</th>
</tr>
</div>
<tr>
<td>...
usw.Wahrscheinlich ist das Blödsinn. Jedenfalls hat der Browser das ignoriert, wogegen er 'freie' Elemente (außerhalb einer Tabelle) sehr wohl richtig (fix) positioniert.
Gibt es eine Lösung?
Gruß
praetor-
Servus.
Mich interessiert das auch!Du kannst nicht einfach Elemente beliebig schachteln.
div hat in table nichts verloren.Benutze zum Gruppieren von tabellenzeilen die dafür vorgesehenen Elemente thead, tfoot, tbody.
Es ist auch (theoretisch) gar nicht nötig, die thead fix zu positionieren. Einfach für tbody eine Größe angeben und dazu noch overflow:auto;
Allerdings verkraften das nur gute Browser.
Der einzige mir bekannte, der überhaupt darauf reagiert, ist der Mozilla. Aber der hat dabei auch noch Probleme (Hintergründe, Rahmen werden nicht mitgescrollt...)
Wenn das nicht jeder, quasi kein Browser mitmacht, was ist die sinnvolle (einfache?!) Alternative.
beschäftigte Grüsse bydey
-
Hallo MudGuard!
So sieht der Code dann z.B. aus:
<style type="text/css">
<!--
/* ... Style-Sheet-Angaben ... */
table { height:100px; width:800px; border-collapse:collapse; border-spacing:0; }
tbody { height:80px; overflow:auto; }
tr { height:2em; }
th { text-align:left; }
td { border-style:solid; border-color:black; border-width:1px; }
-->
</style></head>
<body>
<table>
<thead>
<tr><th>col 1</th><th>col 2</th><th>col 3</th><th>col 4</th><th>col 5</th></tr>
</thead>
<tbody>
<tr><td>col 1 row 01</td><td>col 2 row 01</td><td>col 3 row 01</td><td>col 4 row 01</td><td>col 5 row 01</td></tr>
<tr><td>col 1 row 02</td><td>col 2 row 02</td><td>col 3 row 02</td><td>col 4 row 02</td><td>col 5 row 02</td></tr>
<!-- hier noch zig mehr Zeilen -->
</tbody>
</table>Ja, das funktioniert wirklich. Ich bin beeindruckt. Zwar muß man für diese Lösung die m.E. HTML-averse "Kröte" einer starr definierten Tabellenhöhe schlucken, aber es ist da wohl wie im richtigen Leben. Man kann nicht alles haben.
Herzlichen Dank für Deinen wertvollen Hinweis.
praetor
-