Tabellenzellen mit Scrollbalken

Da man beim Webdesign immer wieder mal Daten in Zeilen und Spalten gliedern muss, bin ich im Buch auch auf das Anlegen und gestalten von Tabellen eingegangen. In der dort kreierten Tabelle (To-Do 39) wurden in den Kopf- und Datenzellen recht kurze Inhalte eingetragen (der längste Inhalt was das Wort “Hersteller” mit zehn Zeichen). Nun kann es aber vorkommen, dass Sie eine Zelle mit mehr Inhalt füllen wollen als die vordefinierten Dimensionen aufnehmen können. In diesem Fall vergrößern die Zellen ihre Höhe und Breite automatisch, was zur Verschiebung anderer HTML-Elemente führt. Das Tabellendesign verliert seine Gleichmäßigkeit, wie Sie in diesem Beispiel nachvollziehen können.

Umgehen lässt sich dieses Problem, in dem man den langen Text nicht direkt in die Zelle platziert. Statt dessen erstellen wir einen Div-Container mit

  1. einer festgelegten Größe,
  2. notieren zusätzlich die Eigenschaft overflow:auto
  3. und platzieren den Text innerhalb des Divs.
1
2
3
4
5
6
7
8
9
<table width="400" border="1">
  <tr>
    <td>
      <div style="width: 300px; height: 40px; overflow:auto;">
        ...Zelleninhalt...
      </div>
    </td>
  </tr>
</table>

Die Eigenschaft overflow reguliert die Darstellung von Elementen, die größer sind als ihr Anzeigebereich. Der Wert auto bewirkt, dass Scrollbalken nur dann angezeigt werden, wenn der Inhalt größer als die Box ist. Ansonsten wird kein Scrollbalken eingeblendet.

Die Anwendung des Div-Containers bei unserem Beispiel können sie hier nachvollziehen.

Die Einbindung mit dem Attribut style wurde nur zur Veranschaulichung benutzt. Selbstverständlich sollte sie als Regel in der zentralen CSS-Datei hinterlegt werden.

Über Jens Kilgenstein

Ich bin seit über zehn Jahren im Bereich Webdesign tätig und betreue seitdem kleine und große Kunden bei der Konzeption und Umsetzung von Webprojekten. → Zum Profil

Ebenfalls Lesenswert:

Bisher keine Kommentare.

Hinterlasse eine Antwort