Wie kann ich den TBody einer Tabelle mit einer festen Höhe scrollbar machen?

TBody-Höhe mit Overflow-Scroll festlegen

Beim Versuch, die Höhe eines Tabellenkörpers (tbody) mit Overflow-Scroll festzulegen, können Benutzer auf Schwierigkeiten stoßen. Hier ist eine Schritt-für-Schritt-Anleitung, um das gewünschte Ergebnis zu erzielen:

Um sicherzustellen, dass der Tbody eine Bildlaufleiste anzeigt, geben Sie seine Anzeigeeigenschaft als Block an. Dadurch kann der Inhalt vertikal fließen.

Als nächstes legen Sie die Anzeigeeigenschaft jedes tr-Elements im Tbody auf „table“ fest. Dadurch bleibt das tabellenartige Verhalten der Zeilen erhalten.

Um die Zellen gleichmäßig zu verteilen, verwenden Sie das Tabellenlayout: Fixed; Eigenschaft für das übergeordnete Tabellenelement. Dies stellt sicher, dass alle Zellen die gleiche Breite haben und verhindert, dass die Tabelle zusammenbricht.

Es ist wichtig zu beachten, dass moderne Ansätze Rasterlayouts gegenüber der hier beschriebenen Technik bevorzugen. Rasterlayouts bieten eine verbesserte Kontrolle und weniger Nebenwirkungen.

Hier ist ein CSS-Beispiel, um die Lösung zu demonstrieren:

table, tr td {
  border: 1px solid red;
}

tbody {
  display: block;
  height: 50px;
  overflow: auto;
}

thead, tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

thead {
  width: calc(100% - 1em);
}

table {
  width: 400px;
}

Wenn der Tbody aufgrund unzureichenden Inhalts immer noch keine Bildlaufleiste anzeigt, explizit Stellen Sie die overflow-y-Eigenschaft auf scrollen ein.

Es ist jedoch wichtig, bestimmte Nachteile davon zu berücksichtigen Ansatz:

• Es trennt die Zellgitter von Kopf und Körper, was möglicherweise die Ausrichtung beeinträchtigt.
• Heutzutage gibt es bessere Alternativen, wie z. B. Rasterlayouts, die diese Probleme vermeiden.

Das obige ist der detaillierte Inhalt vonWie kann ich den TBody einer Tabelle mit einer festen Höhe scrollbar machen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!