Tabelle overflow scroll

lukasn

Hallo allerseits,

Ich habe ein etwas nerviges Problem mit einer Datentabelle. Die Tabelle kann je nach Situation mehrere hundert Zeilen haben. Ich möchte deshalb den <tbody> scrollbar machen, <thead> und wenn möglich <tfoot> sollen dabei aber am Ort bleiben. Die offensichtliche Lösung, dem <tbody> eine fixe höhe und overflow:auto zu geben, funktioniert leider nicht. Ich habe auch versucht, tbody mit display: block und den obigen angaben zu versehen, aber dann funktioniert die Breite nicht mehr.

Nach etwas googlen habe ich nur Lösungen gefunden, die entweder zusätzliches Markup oder Javascript verwenden. Beides Optionen, die ich bisher noch nicht in Betracht ziehen will.

Wer weiss, vielleicht hat ja einer von euch eine Lösung parat.

Danke im Voraus und Gruss,
-Lukas

threadi

Deinen Wunsch habe ich auch vor einiger Zeit gehabt. Dummerweise ist es noch heute so, dass jeder Browser ein overflow von Tabellenelementen unterschiedlich behandelt. Firefox macht es imho noch am Besten, der IE jedoch gar nicht. Das zusätzliche Markup ist leider dafür notwendig, wobei ich den bisher einfachsten Weg über eine pure CSS-Lösung gefunden hatte, die jedoch auch zusätzliche Elemente erforderte. Allerdings klappt das nur bei einem feststehenden <thead>. Du willst aber offenbar auch <tfoot> festzurren, wobei ich mir unsicher bin, ob das überhaupt klappen würde.

styleshiet

Hallo Lucas
ich hab mich vor einiger Zeit auch mit diesem Thema beschäftigt und folgende Lösung gefunden. Code und Klassennamen sind noch aus Testzeiten :?. Es sollte aber dein Problem lösen.

Code

.tblbox{ 
width:300px; 
margin:50px; 
border:1px solid black; 
} 
 
.scrlbox{ 
width:100%; 
height:65px; 
overflow:auto; 
} 
table.tst { 
width:100%; 
border:1px solid #777; 
padding:5px; 
margin:0; 
border-spacing:0; 
text-align:center; 
} 
tr:nth-child(odd) {background-color:#fff; } 
tr:nth-child(even) {background-color:#ddd; }

Alles anzeigen

HTML

<div class="tblbox"> 
<table class="tst" rules="all"> 
   <thead>     
   <tr> <th>No</th> <th>Bus-Linie</th> <th>Abfahrtzeiten</th> </tr> 
   </thead>     
</table> 
<div class="scrlbox"> 
<table class="tst" rules="none"> 
   <tr> <td>1</td> <td>751</td>    <td>13:30</td> </tr> 
   <tr> <td>2</td> <td>752</td>    <td>13:40</td> </tr> 
   <tr> <td>3</td> <td>753</td>    <td>13:50</td> </tr> 
   <tr> <td>4</td> <td>754</td>    <td>14:00</td> </tr> 
   <tr> <td>5</td> <td>755</td>    <td>14:10</td> </tr> 
   <tr> <td>6</td> <td>756</td>    <td>14:20</td> </tr> 
   <tr> <td>7</td> <td>757</td>    <td>14:30</td> </tr> 
   <tr> <td>8</td> <td>758</td>    <td>14:40</td> </tr> 
   <tr> <td>9</td> <td>759</td>    <td>14:50</td> </tr> 
</table> 
</div> 
</div>

Alles anzeigen

Hoffentlich hilft es dir weiter. Viel Spass

lukasn

Hallo Styleshiet,

Danke für die Antwort. Eine ähnliche Lösung verwende ich jetzt auch. Ich wollte ursprünglich wie gesagt vermeiden, zusätzliches Markup zu verwenden. Ich verwende nur im äussersten Notfall Markup, dass nur zu Darstellungszwecken da ist. Und Tabellen bieten von sich aus ja schon mehr als genug Elemente, dass man eigentlich auch ohne div-Salat klar kommen sollte. Aber Tabellen und CSS sind halt leider immer noch sehr unzuverlässige Partner...

Gruss,
-Lukas

Unregistriert

Auf langua.de haben wir dies folgendermaßen gelöst:

Beispiele:

http://langua.de/de/Wörterbuch

Besonders Wert gelegt haben wir auf die Detailanzeige wenn man auf ein Suchergebnis klickt (das ist ein Mehrwert ggü. herkömlichen Wörterbüchern).

Gern beantworte ich alle Fragen zu dem Wörterbuch.

Soweit ich weiß ist die Site sogar W3C valid

Tags