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

100

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.

css css-tables

— Mischa Moroshko
quelle

Vielleicht verwenden, max-heightanstatt nur, heightwie letzteres die Höhe des Tisches erzwingen wird500px

— Fred

Möglicherweise möchten Sie eine zweite Frage stellen, um zu verhindern, dass die Kopfzeile gescrollt wird. ;)

— Bill Bingham

Siehe auch stackoverflow.com/questions/1587927/…

— Alex Nolasco

Antworten:

173

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.

— AgentConundrum
quelle

Dies begrenzt jedoch nicht die Höhe.

— Fred

Nein, es muss nur display:blockauf dem Tisch liegen, damit es sich wie ein div jsfiddle.net/TSGSA/1 verhält

— Fred

@Fred: Große Köpfe denken gleich. Ich habe meine Antwort aktualisiert, während Sie kommentierten. :)

— AgentConundrum

Diese Antwort hat mir wirklich geholfen, aber anstatt sie auf das Tabellen-Tag anzuwenden, sollte sie auf den tbody angewendet werden, damit der Header beim Scrollen statisch bleibt. Dann gibt es ein Styling, das in Bezug auf den Bereich im Kopf über der Bildlaufleiste aussortiert werden muss.

— David

Wenn Sie dies für den Körper verwenden möchten, stellen Sie sicher, dass Sie die Anzeige hinzufügen: Block zum Kopf (und wahrscheinlich zum Fuß), da sie sonst etwas verrückt werden könnten. Das Problem scheint zu sein, dass Sie, sobald Sie dies tun, die Verbindung zwischen dem Kopf und dem Körper unterbrochen haben: Die Spalten des ersteren sind sich der Breite des letzteren nicht bewusst. Also flicken Sie das und gehen den rutschigen Hang hinunter. "Ich bin für die Schönheit gestorben ..."

— Cuse70

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>

— Dunkler Falke
quelle

Dadurch kann der Kopf nicht an Ort und Stelle gehalten werden, während der Körper rollt.

— David

Diese Anforderung ist in der ursprünglichen Frage nicht enthalten.

— Dark Falcon

Auch die andere (akzeptierte) Antwort hält den Kopf nicht an Ort und Stelle.

— Brock Adams

Mit dieser Methode können Sie immer noch den Eindruck erwecken, dass ein Header vorhanden ist. Sie verbergen den Header der Tabelle und erstellen dann eine zweite Tabelle über der ersten Tabelle, in der sich der Header befindet. Gestalten Sie dann beide Tabellen so, dass display:table;ihre Zeilen display:table-row;und Zellen vorhanden sind, display:table-cell;und die beiden Tabellen stimmen überein und scheinen eine zu sein. (HINWEIS: Dies funktioniert nicht mit sehr großen Tabellen; im Grunde passt es zu ihnen, wenn es kann. Ich habe diese Technik mehrmals verwendet.)

— Levininja

Sicher. Die Größe des Elternteils muss angegeben werden, um relative Größen zu verwenden. Zum Beispiel: jsfiddle.net/hz8wy

— Dark Falcon

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

— krupesh Anadkat
quelle