Tabellenzellen mit Scrollbalken in CSS

Der Platz auf einer Webseite ist oftmals begrenzt. Um trotzdem alle Inhalte unterzubringen, bietet CSS die Möglichkeit, längere Texte auch in kleinen Tabellenzellen unterzubringen. Dieser Artikel zeigt, wie leicht Tabellenzellen mit einem Scrollbalken versehen werden können.

Um längere Texte in einer kleinen Tabellenzelle unterzubringen, wird die Größe der Zelle begrenzt und bei Bedarf erscheint ein Scrollbalken, mit dem der nicht sichtbare Textteil erreicht werden kann. Der folgende Quellcode veranschaulicht dies mit einer einfachen Tabelle bestehend aus drei Spalten. Die ersten beiden Spalten enthalten keine längeren Texte und erhalten grundsätzlich die Größe 150 x 100 Pixel (B x H). Die letzte Spalte besteht aus einem längeren Beschreibungstext, der bei Übergröße mit einem Scrollbalken versehen wird, wofür die CSS-Eigenschaft “overflow” verwendet wird.

<html>
<head>
<title>Tabellenzellen mit Scrollbalken</title>
</head>
<body>

<table cellpadding="5" border="1">
 <tr>
  <th>Stadt</th>
  <th>Einwohner</th>
  <th>Beschreibung</th>
 </tr>
 <tr>
  <td>Rhede</td>
  <td>18.000</td>
  <td><div style="height:100px;width:150px;overflow:auto;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc posuere tortor eu quam. Aenean mollis ipsum. Cras nulla elit, interdum nec, auctor at, iaculis non, pede. Maecenas a erat id dui faucibus auctor. Ut ac arcu sit amet leo vehicula suscipit. Nullam arcu. Morbi dignissim odio sit amet libero.</div></td>
 </tr>
 <tr>
  <td>Berlin</td>
  <td>3.400.000</td>
  <td><div style="height:100px;width:150px;overflow:auto;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc posuere tortor eu quam. Aenean mollis ipsum. Cras nulla elit, interdum nec, auctor at, iaculis non, pede. Maecenas a erat id dui faucibus auctor. Ut ac arcu sit amet leo vehicula suscipit. Nullam arcu. Morbi dignissim odio sit amet libero.</div></td>
 </tr>
 <tr>
  <td>Brisbane</td>
  <td>1.800.000</td>
  <td><div style="height:100px;width:150px;overflow:auto;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div></td>
 </tr>
</table>

</body>
</html>

Kategorie: CSS

Tags:

RSSComments (0)

Trackback URL

Kommentar schreiben

Sie müssen eingeloggt sein um zu kommentieren.