Wie kann ich mithilfe von CSS dafür sorgen, dass ein DIV-Element die gesamte Breite und Höhe einer Tabellenzelle ausfüllt?

Erzielen von DIVs in voller Breite und Höhe in Tabellenzellen mit CSS

Diese Frage bleibt seit Jahren ungelöst. Mit CSS3 können wir uns der Herausforderung jedoch noch einmal stellen und untersuchen, wie wir ein DIV so erweitern können, dass es die gesamte Breite und Höhe einer Tabellenzelle ausfüllt.

Der Kern des Problems liegt in der dynamischen Natur der Zellenabmessungen und die eingeschränkte Reaktionsfähigkeit von 100 %-Werten. Um dies zu umgehen, beinhaltet die Lösung einen cleveren Trick.

Zuerst weisen Sie der Tabellenzeile eine Höhe ungleich Null (z. B. 1 Pixel) zu. Dieser Trick löst die Erkennung der Zeilenhöhe durch den Browser aus und ermöglicht so eine anschließende Steuerung.

Als nächstes legen Sie die DIV-Höhe auf 100 % fest, die nun relativ zur festgelegten Zeilenhöhe wird. Dadurch wird sichergestellt, dass sich das DIV dynamisch ausdehnt, um die Zelle vertikal auszufüllen.

Um die Breite des DIV anzupassen, kann die Breite der Zelle explizit mit CSS angegeben oder automatisch basierend auf ihrem Inhalt in der Größe angepasst werden.

Diese anwenden Regeln stellen sicher, dass das DIV die gesamten Abmessungen der Tabellenzelle ausfüllt, unabhängig von ihren anfänglichen oder dynamischen Werten.

Hier ist ein Beispiel-CSS Ausschnitt:

table {
  width: 200px;
}

tr {
  height: 1px;
}

td {
  height: inherit;
}

div {
  height: 100%;
}

Das obige ist der detaillierte Inhalt vonWie kann ich mithilfe von CSS dafür sorgen, dass ein DIV-Element die gesamte Breite und Höhe einer Tabellenzelle ausfüllt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!