Wie stellt man die Tbody-Höhe mit Overflow-Scrolling in HTML-Tabellen richtig ein?

Tbody-Höhe mit Overflow Scroll festlegen

Beim Arbeiten mit Tabellen in HTML ist es manchmal notwendig, die Höhe des tbody-Elements beim Aktivieren einzuschränken Überlauf beim Scrollen. Leider reicht die Verwendung der display:scroll-Eigenschaft allein für tbody nicht aus.

Um den gewünschten Effekt zu erzielen, ist eine Kombination von CSS-Eigenschaften erforderlich:

1. Anzeige blockieren:

Anzeige festlegen: Block auf dem Tbody festlegen, um ihn aus dem Tabellenfluss zu unterbrechen und ihm zu ermöglichen, seine eigene Breite und Höhe einzunehmen.

2. Feste Höhe:

Geben Sie die Höhe an: 50px (oder wie gewünscht) auf dem Körper, um dessen Höhe zu definieren.

3. Tabellenanzeige für Tabellenzeilen:

Anzeige: Tabelle auf den tr-Elementen des Tabellenkörpers festlegen, um ihr tabellenartiges Verhalten beizubehalten.

4. Festes Tischlayout:

Tischlayout verwenden: auf dem Kopf und dem Körper fixiert, um eine gleichmäßige Zellverteilung zu gewährleisten.

5. Passen Sie die Breite des Kopfes an:

Um die Breite der Bildlaufleiste auszugleichen, reduzieren Sie die Breite des Kopfes leicht mit width: calc(100% - 1em).

Beispiel:

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;
}

Hinweis:

Zunächst wird die Bildlaufleiste möglicherweise nicht angezeigt, wenn der Tbody Der Inhalt ist kürzer als die angegebene Höhe. Um jederzeit eine Bildlaufleiste sicherzustellen, legen Sie overflow-y: scroll auf dem Tbody fest.

Außerdem ist es wichtig, die Einschränkungen dieses Ansatzes im Vergleich zu anderen Optionen wie Rasterlayout oder JavaScript-basierten Lösungen zu berücksichtigen.

Das obige ist der detaillierte Inhalt vonWie stellt man die Tbody-Höhe mit Overflow-Scrolling in HTML-Tabellen richtig ein?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!