wake-up-neo.com

Wie kann ich 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 der Tabelle festlegen, z. B. für 500px. Wenn die Höhe der Tabelle größer ist, wird eine vertikale Bildlaufleiste angezeigt. Ich habe versucht, das CSS-Attribut height für table zu verwenden, aber es funktioniert nicht.

csscss-tables
96
Misha Moroshko

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

Da Sie nur den vertikalen Bildlauf möchten, versuchen Sie Folgendes:

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

EDIT:

Offensichtlich respektieren <table> - Elemente die Eigenschaft overflow nicht. Dies scheint darauf zurückzuführen zu sein, dass <table> - Elemente nicht standardmäßig als display: block Gerendert werden (sie haben tatsächlich einen eigenen Anzeigetyp). Sie können die Funktion der Eigenschaft overflow erzwingen, indem Sie das Element <table> 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.

157
AgentConundrum

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>
56
Dark Falcon

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

2
krupesh Anadkat