Wie kann ich eine Höhe für einen Tabellenkörper (tbody) festlegen und das Überlauf-Scrollen in HTML aktivieren?

Festlegen der Tabellenkörperhöhe mit Overflow Scroll

Ein häufiges Problem bei der Arbeit mit HTML-Tabellen ist die Unfähigkeit, eine Höhe für die Tabelle festzulegen body (tbody), während Überlauf-Scrollen aktiviert ist. Dies kann dazu führen, dass Tabellendaten abgeschnitten werden oder nicht wie erwartet angezeigt werden.

Um dieses Problem zu beheben, müssen die CSS-Eigenschaften sowohl des Tbody als auch der enthaltenden Tabelle angepasst werden:

1. tbody Styles:

• Anzeige festlegen: Block; um das standardmäßige Tabellenrasterlayout zu entfernen, sodass sich der Tbody wie ein Element auf Blockebene verhält.
• Geben Sie die gewünschte Höhe für den Tbody mit „height“ an.
• Überlauf aktivieren, indem Sie „overflow: scroll“ festlegen; .

2. Tabellenstile:

• Überlauf festlegen: ausgeblendet; um zu verhindern, dass Inhalte außerhalb der Tabelle überlaufen.
• Tabellenlayout verwenden: behoben; um eine gleichmäßige Verteilung der Spaltenbreiten zu gewährleisten.

3. Containertabelle:

In manchen Fällen kann es notwendig sein, die Tabelle in ein Container-Div einzuschließen und das Overflow-Y des Divs auf Scrollen zu setzen, um vertikales Scrollen zu ermöglichen.

Durch Befolgen Mit diesen Schritten können Sie effektiv eine Höhe für den Tbody festlegen und gleichzeitig den Overflow-Scroll beibehalten, sodass Sie Tabellendaten anzeigen können, ohne dass diese abgeschnitten werden versteckt.

Codebeispiel:

<style>
  tbody {
    display: block;
    height: 50px;
    overflow: scroll;
  }

  table {
    table-layout: fixed;
    overflow: hidden;
  }

  #table-container {
    overflow-y: scroll;
  }
</style>

<div><p><strong>Hinweis:</strong> Dieser Ansatz kann bestimmte Einschränkungen oder Nachteile haben, wie z. B. eine mögliche Fehlausrichtung von Header und Körperzellen. Es ist wichtig, das CSS zu testen und bei Bedarf anzupassen, um es an die spezifischen Anforderungen Ihrer Tabelle anzupassen.</p></div>

Das obige ist der detaillierte Inhalt vonWie kann ich eine Höhe für einen Tabellenkörper (tbody) festlegen und das Überlauf-Scrollen in HTML aktivieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!