Scrollbalken in Tabellen erzeugen

Mit Hilfe von CSS ist es möglich, Scrollbalken auch in den Zellen von Tabellen zu erzeugen. Der Einsatz von Scrollbalken in Tabellen ist bspw. dann sinnvoll, wenn du aufgrund von Platzmangel keine langen Tabellen verwenden möchtest. Hierdurch lässt sich dann bequem durch einzelne Zellen mit langem Text scrollen.

Wie du in Tabellen scrollen kannst, zeige ich dir dabei in diesem Artikel.

 

Scrollbalken in Tabellen anzeigen

Im nachstehenden Beispiel verwende ich ein DIV, um dadurch den Scrollbalken innerhalb einer Zelle der Tabelle zu erzeugen.

 

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 erzeugst du eine dreispaltige Tabelle. Die dritte Zelle hat dabei eine Höhe von 100 und eine Breite von 150 Pixeln. Ist der Text länger als die Tabelle, blendet der Browser automatisch Scrollbalken innerhalb der Zelle ein. Somit kannst du durch die Zelle der Tabelle scrollen.

Der CSS Code ist im Beispiel inline eingebunden. Somit gilt er dadurch nur für diese eine Zelle der Tabelle. Bindest du den Code hingegen in dein Stylesheet ein, gilt er natürlich für alle Tabellen. Du kannst aber auch eine CSS Klasse erstellen, die du schließlich individuell ansprechen kannst.

 

Erklärung:

Die Scrollbalken werden dabei durch das Attribut overflow:auto; im angelegten <div> erzeugt. Mit diesem Attribut hast du auch die Möglichkeit, in anderen Elementen deiner Website ebenso Scrollbalken zu erzeugen. Du musst also nicht extra eine Tabelle dafür anlegen.

 


Dir gefällt dieser Artikel?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.