Wie kann man die Höhe der Tabelle so festlegen, dass eine vertikale Bildlaufleiste angezeigt wird?

Ich habe eine Tabelle mit vielen Zeilen auf meiner Seite. Ich möchte die Höhe des Tisches festlegen, z. B. für 500px, sodass eine vertikale Bildlaufleiste angezeigt wird, wenn die Höhe des Tisches größer ist. Ich habe versucht, das CSS- heightAttribut für das zu verwenden table, aber es funktioniert nicht.

Versuchen Sie es mit der overflowCSS-Eigenschaft. Es gibt auch separate Eigenschaften, um das Verhalten von nur horizontalem Überlauf ( overflow-x) und vertikalem Überlauf ( overflow-y) zu definieren.

Versuchen Sie Folgendes, da Sie nur die vertikale Schriftrolle möchten:

table {
  height: 500px;
  overflow-y: scroll;
}

BEARBEITEN:

Anscheinend <table>respektieren Elemente die overflowEigenschaft nicht. Dies scheint darauf zurückzuführen zu sein, dass <table>Elemente nicht display: blockstandardmäßig gerendert werden (sie haben tatsächlich einen eigenen Anzeigetyp). Sie können die Funktion der overflowEigenschaft erzwingen , indem Sie das <table>Element als Blocktyp festlegen:

table {
  display: block;
  height: 500px;
  overflow-y: scroll;
}

Beachten Sie, dass das Element dadurch eine Breite von 100% hat. Wenn Sie also nicht möchten, dass es die gesamte horizontale Breite der Seite einnimmt, müssen Sie auch eine explizite Breite für das Element angeben.

Sie müssen die Tabelle in ein anderes Element einschließen und die Höhe dieses Elements festlegen. Beispiel mit Inline-CSS:

<div style="height: 500px; overflow: auto;">
 <table>
 </table>
</div>

Um die Höhe der Tabelle festzulegen, müssen Sie zuerst die CSS-Eigenschaft "display: block" festlegen und dann die Eigenschaften "width / height" hinzufügen. Ich finde diesen Mozilla-Artikel eine sehr gute Ressource, um zu lernen, wie man Tabellen formatiert: Link