Es gibt mehrere CSS-Eigenschaften zum Gestalten der HTML-Elemente. Der ' Anzeige ”-Eigenschaft ist eine davon, die zum Festlegen des Elements verwendet wird, das als Inline-Element oder Blockelement verwaltet wird. Darüber hinaus das Layout, das für seine untergeordneten Elemente verwendet wird, z. B. Flow, Flex oder Grid. Darüber hinaus weist diese Eigenschaft die inneren und äußeren Typen zu, um ein Element anzuzeigen.
Dieser Beitrag erklärt:
Wie verwende ich „display: table-cell“ in CSS?
Um das „ Anzeige „Eigenschaft mit dem Wert“ Tabellenzelle “, probieren Sie die gegebenen Anweisungen aus.
Schritt 1: Erstellen Sie verschachtelte div-Container
Erstellen Sie zunächst den Haupt-Div-Container mit Hilfe des „ Um auf das Haupt-Div zuzugreifen, verwenden Sie die „ #Tabelleninhalt ', Wo ' # “ ist ein Selektor, der für den Zugriff auf das angegebene „ Ausweis ”-Attribut des div-Containers. Wenden Sie dann die folgenden Eigenschaften an: Schritt 3: Gestalten Sie den „tr-div“-Container Stylen Sie jetzt das „ tr-div ” Behälter wie folgt: Ausgang Der ' Anzeige: Tabellenzelle ” Die CSS-Eigenschaft wird verwendet, um eine Anzeige auf Daten einzustellen, die das Element dazu bringen, sich wie eine Tabelle zu verhalten. So können Benutzer ein Duplikat einer Tabelle in HTML erstellen, ohne das Tabellenelement und andere Elemente, einschließlich td und tr, zu verwenden. Genauer gesagt definiert sein Eigentum die Daten in Form einer Tabelle. Um das „ Anzeige: Tabellenzelle ” CSS-Eigenschaft, erstellen Sie verschachtelte div-Container und fügen Sie in jeden Container eine Klasse mit einem bestimmten Namen ein. Greifen Sie dann in CSS auf den div-Container zu und wenden Sie die Eigenschaft „display: table-cell“ an, wobei „ Anzeige ”-Eigenschaft wird zum Einstellen der Daten in den Tabellenzellen verwendet. In diesem Beitrag wurde die Methode zur Verwendung der CSS-Eigenschaft display:table-cell demonstriert.
< div Ausweis = 'Tabelleninhalt' >
< div Klasse = 'tr-div' >
< div Klasse = 'td-div' > Harry div >
< div Klasse = 'td-div' > HTML / CSS div >
div >
< div Klasse = 'tr-div' >
< div Klasse = 'td-div' > Eduard div >
< div Klasse = 'td-div' > Docker div >
div >
< div Klasse = 'tr-div' >
< div Klasse = 'td-div' > Jack div >
< div Klasse = 'td-div' > Git div >
div >
div >
Es kann festgestellt werden, dass Daten erfolgreich hinzugefügt wurden:
Schritt 2: Gestalten Sie den „Tabelleninhalt“-Container
Anzeige: Tabelle;
Polsterung: 7px;
}
Hier:
Anzeige: Tabellenzeile;
Hintergrundfarbe: rgb ( 164 , 241 , 215 ) ;
Polsterung: 7px;
}
Gemäß dem obigen Codeblock ist die „ Anzeige ” Eigenschaftswert wird festgelegt als “ Tischreihe ” was bedeutet, dass Daten in Form von Zeilen in einer Tabelle gesetzt werden, “ Hintergrundfarbe „Eigenschaft wird verwendet, um die Farbe auf der Rückseite des Elements anzugeben, und schließlich „ Polsterung ' wird angewandt:
Schritt 4: Wenden Sie die Eigenschaft „display: table-cell“ auf den Container „td-div“ an
Anzeige: Tabellenzelle;
Breite: 150px;
Grenze: #0f4bf0 solide 1px;
Rand: 5px;
Polsterung: 7px;
}
Greifen Sie mit Hilfe von „ .td-div ” Punkt selektiv und die jeweilige ID, und wenden Sie die unten angegebenen CSS-Eigenschaften an:
Warum „display: table-cell“ in CSS verwenden?
Abschluss