HTML-Tabelle scrollbar machen

Dieser Artikel stellt eine Methode vor, um eine vertikal scrollbare HTML-Tabelle zu erstellen.

Setzen Sie die CSS-Eigenschaft overflow-y auf scroll, um die HTML-Tabelle scrollbar zu machen

Wenn eine HTML-Tabelle lang ist, wird eine Funktion benötigt, um nur die Tabelle und nicht die gesamte Seite zu scrollen. Um diese Funktionalität zu erreichen, können wir die Eigenschaft overflow-y verwenden.

Dabei steht y für die y-Achse. Die Eigenschaft definiert die Überlaufeigenschaft eines Elements auf Blockebene entlang der vertikalen Achse.

Der Wert scroll macht das Element auf Blockebene von oben nach unten scrollbar.

Um eine HTML-Tabelle vertikal scrollbar zu machen, können wir die Tabelle mit einem <div> umbrechen. Dann können wir mit der Eigenschaft height eine feste Höhe für <div> festlegen.

Danach können wir die Eigenschaft overflow-y auf scroll setzen. Wenn die Tabellenhöhe die Höhe des von uns gesetzten div überschreitet, dann macht overflow-y: scroll die Tabelle in y-Richtung (vertikal) scrollbar.

Daher müssen wir sicherstellen, dass die Höhe der Tabelle die Höhe des <div> überschreitet.

Erstellen Sie beispielsweise ein div und geben Sie ihm den Klassennamen container. Erstellen Sie innerhalb dieses div eine Tabelle und geben Sie ihr den Klassennamen data.

Füllen Sie die Tabelle mit Daten unter Verwendung der Tags tr, th und td.

Wählen Sie in CSS die Klasse container und setzen Sie ihre height-Eigenschaft auf 70px und ihre overflow-y-Eigenschaft auf scroll. Stellen Sie sicher, dass die Tabelleninhalte eine Höhe von mehr als 70px haben.

Als nächstes wählen Sie die Tabelle mit dem Klassenselektor und den Elementen th und td der Tabelle aus. Setzen Sie dann die Eigenschaft border auf 1px solid black, die Eigenschaft border-collapse auf collapse und padding auf 4px. (Hinweis: Dies ist nicht zwingend erforderlich, um die Tabelle besser lesbar zu machen.)

Das folgende Beispiel zeigt, dass die Tabelle vertikal scrollbar ist, da die Höhe der Tabelle höher ist als die des div oder .container.

Beispielcode:

<div class="container">
<table class="data">
<tr>
 <th>id</th>
 <th>Name</th>
 <th>Country</th>
</tr>
<tr>
 <td>1</td>
 <td>John Doe</td>
 <td>Nepal</td>
</tr>
<tr>
 <td>2</td>
 <td>Sam Smith</td>
 <td>India</td>
</tr>
<tr>
 <td>3</td>
 <td>Jack Daniels</td>
 <td>China</td>
</tr>
</table>
</div>

.container {
 height: 70px;
 overflow-y: scroll;
}
.data, th, td {
 border: 1px solid black;
 border-collapse: collapse;
 padding: 4px;
}

Daher ist beim Laden der Seite nicht die gesamte Tabelle sichtbar. Das liegt daran, dass wir als Höhe des Containers 70px eingestellt haben.

Aber wenn wir vertikal nach unten scrollen, können wir den Rest des Tabelleninhalts sehen.

Auf diese Weise können wir die HTML-Tabelle vertikal scrollbar machen, indem wir die Eigenschaft overflow-y verwenden und sie auf scroll setzen.