CSS

Scrollbalken in Tabellen

Details

Veröffentlicht am Samstag, 18. Oktober 2008 19:41

Geschrieben von Jan Pionzewski

Mit Hilfe von CSS ist es möglich, Scrollbalken auch in Tabellenzellen zu erzeugen. Der Einsatz von Scrollbalken in Tabellen ist dann sinnvoll, wenn Sie aufgrund Ihres Designs oder Platzmangels keine ellenlangen Tabellen verwenden möchten. So lässt sich bequem durch einzelne Tabellenzellen mit langem Text scrollen.

Beispiel:

<table>
  <tr>
    <th>Monat</th>
    <th>Jahr</th>
    <th>Bemerkungen</th>
  </tr>
  <tr>
    <td>Januar</td>
    <td>2008</td>
    <td><div style="height:100px;width:150px;overflow:auto;">Hier könnte ein Langer text stehen. Wenn er zu lang wird, werden automatisch Scrollbalken eingeblendet</div></td>
  </tr>
</table>

Mit diesem Beispiel wird eine dreispaltige Tabelle erzeugt. Die dritte Zelle hat eine Höhe von 100 und eine Breite von 150 Pixeln. Ist der Text in dieser Zelle nun länger als die Tabelle ihn darstellen könnte, würden automatisch Scrollbalken innerhalb der Tabelle eingeblendet, um durch die Spalte scrollen zu können.