HTML-Tabelle scrollbar machen

Damit eine lange HTML-Tabelle die Seite nicht in die Länge zieht, setzen Sie die semantische Tabelle in einen Container mit begrenzter Höhe und weisen Sie ihm overflow-y: auto zu. Der Container wird vertikal scrollbar, sobald sein Inhalt diese Höhe überschreitet; Zeilen und Spalten der Tabelle bleiben dabei erhalten.

Eine HTML-Tabelle mit CSS vertikal scrollbar machen

Dieses vollständige Seitenbeispiel verwendet einen 200 Pixel hohen Container und eine native Tabelle mit Kopf- und Inhaltsbereich. Die Zeilen machen den Inhalt höher als den Container, sodass im Tabellenbereich gescrollt werden kann.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Scrollable table</title>
  <style>
    .table-scroll {
      max-height: 200px;
      overflow-y: auto;
      border: 1px solid #ccc;
    }

    table {
      width: 100%;
      border-collapse: collapse;
    }

    th, td {
      padding: 8px;
      border: 1px solid #ddd;
      text-align: left;
    }
  </style>
</head>
<body>
  <div class="table-scroll" role="region" aria-label="Employee directory" tabindex="0">
    <table>
      <thead>
        <tr><th scope="col">Name</th><th scope="col">Age</th><th scope="col">Country</th></tr>
      </thead>
      <tbody>
        <tr><td>John Doe</td><td>30</td><td>USA</td></tr>
        <tr><td>Jane Smith</td><td>25</td><td>Canada</td></tr>
        <tr><td>Sam Wilson</td><td>28</td><td>UK</td></tr>
        <tr><td>Emily Johnson</td><td>35</td><td>Australia</td></tr>
        <tr><td>Michael Brown</td><td>40</td><td>Germany</td></tr>
        <tr><td>Linda Davis</td><td>22</td><td>France</td></tr>
        <tr><td>James Garcia</td><td>29</td><td>Spain</td></tr>
        <tr><td>Patricia Martinez</td><td>31</td><td>Mexico</td></tr>
        <tr><td>Robert Wilson</td><td>38</td><td>Italy</td></tr>
        <tr><td>Jessica Lee</td><td>27</td><td>Netherlands</td></tr>
      </tbody>
    </table>
  </div>
</body>
</html>

max-height begrenzt die Höhe des Containers; overflow-y legt fest, was geschieht, wenn die Tabelle höher ist. Mit tabindex="0" ist der Bereich per Tastatur erreichbar. Fokussieren Sie ihn und prüfen Sie mit den Pfeiltasten, ob er scrollt. Die Beschriftung des Bereichs liefert assistiven Technologien zusätzlichen Kontext. Behalten Sie <table>, <thead>, <tbody> und die Kopfzellen bei, damit Browser und assistive Technologien die Beziehungen innerhalb der Tabelle erkennen können.

Für vertikalen Überlauf auto oder scroll wählen

Verwenden Sie overflow-y: auto, damit eine Bildlaufleiste erscheint, wenn der Inhalt über den Container hinausgeht. Passen die Zeilen hinein, wird keine Bildlaufleiste benötigt. overflow-y: scroll fordert einen Scrollmechanismus auch dann an, wenn der Inhalt derzeit hineinpasst. Ob die Bildlaufleiste sichtbar ist, hängt jedoch vom Betriebssystem und Browser ab. Setzen Sie die Überlaufregel in beiden Fällen auf den Container, nicht auf einzelne Zeilen. Eine Höhe oder maximale Höhe legt die vertikale Begrenzung fest. Ohne eine solche Begrenzung kann der Container mit der Tabelle wachsen, sodass kein internes vertikales Scrollen erforderlich ist.

Führen Sie dieses kurze JavaScript-Beispiel aus, um die Containerregel schnell zu übernehmen. Es gibt die oben verwendeten CSS-Deklarationen aus. Passen Sie die Höhe an den verfügbaren sichtbaren Bereich an.

const rule = [
  ".table-scroll {",
  "  max-height: 200px;",
  "  overflow-y: auto;",
  "}"
].join("\n");
console.log(rule);

.table-scroll {
  max-height: 200px;
  overflow-y: auto;
}

Tabellen-Semantik und Tastaturzugriff erhalten

Verwenden Sie für tabellarische Daten echte Tabellenelemente, statt sie durch allgemeine CSS-Grid-Zellen zu ersetzen. Grid eignet sich für Layouts, aber eine Gruppe von div-Elementen stellt Beziehungen zwischen Kopf- und Datenzellen nicht automatisch als Datentabelle bereit. Im Beispiel ist der scrollbare Container als Bereich beschriftet und in die Tastaturreihenfolge aufgenommen. Prüfen Sie die Bedienung mit der Tastatur: Wechseln Sie per Tab zum beschrifteten Bereich, scrollen Sie mit den Pfeiltasten und fahren Sie anschließend mit dem Tabben fort. Fügen Sie nativen Tabellenelementen keine ARIA-Tabellenrolle hinzu, da sie diese semantische Rolle bereits bereitstellen.

Horizontal scrollen und Bootstrap-Stile ergänzen

Sind die Spalten breiter als der verfügbare Platz, ergänzen Sie .table-scroll um overflow-x: auto. Dann lässt sich der Container sowohl horizontal als auch vertikal scrollen. Lassen Sie der Tabelle genügend Breite für ihre Spalten, statt den Text auf eine schwer lesbare Breite zu zwingen. Testen Sie die Seite im schmalen Ansichtsbereich, in dem die Tabelle verwendet wird, und prüfen Sie, ob alle Spalten erreichbar sind.

Wenn das Projekt Bootstrap bereits lädt, können Sie dieselbe semantische Tabelle mit Klassen wie table und table-bordered gestalten. Diese Klassen beeinflussen die Darstellung; das Scrollverhalten wird weiterhin durch den begrenzten Container und seine CSS-Überlaufregeln bereitgestellt. So bleibt das Scrollverhalten ausdrücklich festgelegt und das Tabellen-Markup funktioniert mit oder ohne Bootstrap.