Wie und warum können Sie in CSS „Display Table-Cell“ verwenden

Es gibt mehrere CSS -Eigenschaften zum Styling der Elemente von HTML. Der "AnzeigeEigenschaft ist eine von ihnen, die zum Festlegen des Elements verwendet wird, das als Inline -Element oder Blockelement verwaltet wird. Darüber hinaus wird das für seine Kinder verwendete Layout wie Fluss, Flex oder Netz verwendet. Darüber hinaus weist diese Eigenschaft die inneren und äußeren Typen zur Anzeige eines Elements zu.

Dieser Beitrag wird erklären:

• • Verwenden Sie "Anzeige: Tabellenzell" in CSS?
  • Warum „Anzeige: Tabellenzell“ in CSS verwenden?

Verwenden Sie "Anzeige: Tabellenzell" in CSS?

Die "die" verwenden "Anzeige”Eigenschaft mit dem Wert“TischzelleProbieren Sie die angegebenen Anweisungen aus.

Schritt 1: Machen Sie verschachtelte Div -Behälter

Erstellen Sie zunächst den Haupt -Div -Container mit Hilfe des “”Tag und fügen Sie die“ ein und “Ausweis”Attribut im Div -Tag. Fügen Sie dann zwischen dem Div -Tag mehr Container hinzu und fügen Sie eine "hinzu"Klasse”Attribut in jedem Div:

Herry

Es ist zu bemerken, dass Daten erfolgreich hinzugefügt wurden:

Schritt 2: Style „Tabellen-in-Inhalts“ -Container

Um auf die Hauptdiv zuzugreifen, verwenden Sie die “#Tabelleninhalt", Wo "#"Ist ein Selektor, der zum Zugriff auf die angegebenen" verwendet wird "Ausweis”Attribut des Div -Behälters. Wenden Sie dann die folgenden Eigenschaften an:

#Tabelleninhalt
Anzeige: Tabelle;
Polsterung: 7px;

Hier:

• • Der "AnzeigeEigenschaft definiert und bestimmt, wie ein Element aussieht. Dazu wird der Wert dieser Eigenschaft als "festgelegt" festgelegt "Tisch”Für die Herstellung des Tisches.
  • “Polsterung”Zuweist den Raum im Behälter.

Schritt 3: Stil „TR-DIV“ -Stil-Container

Jetzt style the “TR-DivContainer wie folgt:

.TR-div
Anzeige: Tabellenreihe;
Hintergrundfarbe: RGB (164, 241, 215);
Polsterung: 7px;

Gemäß dem obigen Code-Block die “Anzeige"Eigenschaftswert wird als" festgelegt "Tischreihe"Dies bedeutet, dass Daten in Form von Zeilen in einer Tabelle festgelegt werden"Hintergrundfarbe„Eigenschaft wird verwendet, um die Farbe am Hintern des Elements anzugeben, und zum Schluss:“Polsterung" wird angewandt:

Schritt 4: Anwenden Sie die Eigenschaft „Anzeige: Tabelle-Zell“ im Container „TD-Div“

.td-div
Anzeige: Tabellenzelle;
Breite: 150px;
Rand: #0F4BF0 Solid 1px;
Rand: 5px;
Polsterung: 7px;

Zugang zur dritten Div mit Hilfe von “.td-divSelektiv und die jeweilige ID und wenden Sie die unten angegebenen CSS -Eigenschaften an:

• • Der Wert der “Anzeige"Eigenschaft wird als" festgelegt "Tischzelle”Das wird zum Erstellen der Zelle und zum Hinzufügen von Daten zur Zelle verwendet.
  • “BreiteGibt die Größe der Tabellenzelle horizontal an.
  • “Grenze”Definiert eine Grenze um die Zellen.
  • “RandDas Eigentum verteilt den Raum außerhalb der definierten Grenze.
  • “PolsterungGibt den Raum innerhalb der Grenze an.

Ausgang

Warum „Anzeige: Tabellenzell“ in CSS verwenden?

Der "Anzeige: Tabellenzelle”CSS -Eigenschaft wird zum Festlegen einer Anzeige auf Daten verwendet, die das Element wie eine Tabelle verhalten lässt. So können Benutzer ein Duplikat einer Tabelle in HTML erstellen, ohne das Tabellenelement und andere Elemente, einschließlich TD und TR, zu verwenden. Insbesondere definiert seine Eigenschaft die Daten in Form einer Tabelle.

Abschluss

Die "die" verwenden "Anzeige: Tabellenzelle”CSS -Eigenschaft, erstellen Sie verschachtelte Div -Container und fügen Sie eine Klasse in jedem Container mit einem bestimmten Namen ein. Greifen Sie dann in CSS auf den Div-Container zu und wenden Sie die Eigenschaft „Anzeige: Tabelle-Zell“ an, wobei die “AnzeigeDie Eigenschaft wird verwendet, um die Daten in den Tabellenzellen festzulegen. Dieser Beitrag hat die Methode zur Verwendung der Anzeige-Zell-CSS-Eigenschaft gezeigt.