Beat: Scrollbare Tabelle

Beitrag lesen

SELF-Forum

Scrollbare Tabelle

Beat Homepage des Autors
– Informationen zu den Bewertungsregeln

ich soll den Inhalt einer Tabelle scrollbar machen, so dass man runter scrollen kann und oben der thead stehenbleibt. Leider hab ich überhaupt keine Idee wie man sowas vernünftig implementieren soll.

Bspw. soll die Tabelle mit 200 px Höhe angezeigt werden und 100 Zeilen haben. Ich scrolle nun innerhalb dieses 200px Bereichs und oben bleiben die Spaltenüberschriften stehen.

Folgender Test wird leider nicht an allen Browser umgesetzt, wäre aber der theoretische Weg:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
<head>  
<title>Untitled</title>  
<style type="text/css">  
  table {margin:0; border:1px solid black; width:10em;}  
  tbody {height:4em; overflow:auto;}  
  td, th {border:1px solid red;}  
  thead th:last-child {visibility:hidden}  
</style>  
</head>  
<body>  
  
<table>  
<thead>  
  <tr><th>T</th><th>T</th><th></th></tr>  
</thead>  
<tbody>  
  <tr><td>X</td><td>X</td></tr>  
  ... (20x) ...  
</tbody>  
</table>  
  
</body>  
</html>

Der Trick ist ein unsichtbares th mehr, dessen Breite genug Platz für den Scrollbar schafft.

:last-child lässt sich auch durch Klassen implementieren.

mfg Beat

--
><o(((°>           ><o(((°>
   <°)))o><                     ><o(((°>o
Der Valigator leibt diese Fische
Beitrag melden
–
Informationen zu den Bewertungsregeln