Scrollbalken in Tabellen erzeugen

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

 

Scrollbalken in Tabellenzellen erzeugen

Im nachstehenden Beispiel wird ein <div>-Element verwendet, um den Scrollbalken innerhalb einer Zelle der Tabelle zu erzeugen.

 

Code-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 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. Somit kannst du durch die Zelle der Tabelle scrollen.

 

Hinweis:

Die Scrollbalken werden durch das Attribut overflow:auto; im angelegten <div> erzeugt. Mit diesem Attribut hast du natürlich die Möglichkeit, auch in anderen Elementen deiner Website 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.