Tabellen scrollbar machen

Eine Tabelle ist gerade in Layouts, die in der Breite begrenzt sind, manchmal problematisch. Leicht zerschießt einem diese mal das Layout, weil sie breiter als der Content-Bereich ist. Hat diese Tabelle dann auch noch in der Vertikalen Kopfbereiche, bringt meist ein umgebendes div-Element, das mit overflow: auto; ausgezeichnet ist, nichts. Doch es gibt eine Lösung dafür.
Eine normale Tabelle nach folgendem Muster lässt sich einfach scrollbar machen, ohne dass der semantische Bezug auf HTML-Ebene verloren geht und sie auch optisch den Bezug nicht verliert.

<table>
  <thead>
    <tr>
      <th><strong>&nbsp;</strong></th>
      <th><strong>Head 1</strong></th>
      <th><strong>Head 2</strong></th>
      <th><strong>Head 3</strong></th>
      <th><strong>Head 4</strong></th>
      <th><strong>Head 5</strong></th>
      <th><strong>Head 6</strong></th>
      <th><strong>Head 7</strong></th>
      <th><strong>Head 8</strong></th>
      <th><strong>Head 9</strong></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Vertical Head 1</th>
      <td>Value 1</td>
      <td>Value 2</td>
      <td>Value 3</td>
      <td>Value 4</td>
      <td>Value 5</td>
      <td>Value 6</td>
      <td>Value 7</td>
      <td>Value 8</td>
      <td>Value 9</td>
    </tr>
    <tr>
      <th>Vertical Head 2</th>
      <td>Value 1</td>
      <td>Value 2</td>
      <td>Value 3</td>
      <td>Value 4</td>
      <td>Value 5</td>
      <td>Value 6</td>
      <td>Value 7</td>
      <td>Value 8</td>
      <td>Value 9</td>
    </tr>
  </tbody>
</table>

Die th-Elemente im tbody-Teil werden einfach mittels position: absolute; festgepinnt. Die Tabelle bekommt ein overflow: auto;, sodass sie Scroll-Balken anzeigt, wenn es nötig wird, dazu muss sie auch dislay: block; erhalten. Das strong-Tag ist im th von Nöten, da die Kopf-Elemente eine Breitenangaben benötigen, denn sonst schrumpft die Tabelle sie einfach so weit zusammen, dass sie ins Layout passen, was meistens nicht mehr leserlich ist. Für eine funktionierende Breitenangaben müssen sie auf display: block; geschaltet werden – würde man dies direkt mit dem th machen, würden diese alle untereinander stehen, was nicht gewünscht ist, daher leider der Umweg über das eigentlich unnötige strong-Element.
Der Internet-Explorer braucht leider malwieder eine Sonderbehandlung – er fügt dem table-Element keine Scroll-Balken hinzu, daher umgibt man die Tabelle noch mit einem div-Element, das im IE die Scroll-Balken erzeugt. Die Browser-Weiche habe ich wie neulich bereits beschrieben vorgenommen.

#content table {
  display: block;
  overflow: auto;
}
.ie #content .tablewrapper {
  overflow-x: scroll;
  overflow-y: hidden;
}
#content table thead tr th strong {
  width: 100px;
  display: block;
}
#content table tbody {
  position: relative;
}
#content table tbody tr th {
  position: absolute;
  text-align: left;
}
#content table tbody tr:hover td {
  background-color: #f3f3f3;
}
#content table th {
  background-color: #efefef;
}
#content table tbody tr th,
#content table th:first-child strong {
  width: 120px;
  display: block;
}

Ansehen kann man sich das ganze fertig auf folgender Test-Seite.
Gelöst ist hiermit nicht das Problem, wenn die Tabelle auch in der Höhe begrenzt ist, also auch die oben stehenden Kopf-Elemente der Tabelle stehen bleiben sollen. Denn man kann ihnen nicht eine Art position-y: fixed; mitgeben, sodass sie horizontal scrollen würden, aber bei vertikalem Scrollen stehen bleiben würden. Da die Höhe aber seltener das Problem bei Websites ist, dürfte meine Lösung in den meisten Fällen helfen.

Veröffentlicht von

Hilko

2006 machte ich mein Hobby zum Beruf, startete mit einer Ausbildung zum Mediengestalter und arbeite inzwischen in Hannover als Frontend Web-Developer. Neben der Leidenschaft für semantisches Markup und den Möglichkeiten der aktuellen Frontend-Techniken, interessiere ich mich für das Reisen, fremde Kulturen und die Kunst der Fotografie.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.