Come e perché utilizzare Display Table-Cell in CSS

Esistono più proprietà CSS per lo styling degli elementi di HTML. IL "Schermo"La proprietà è una di queste, che viene utilizzata per l'impostazione dell'elemento gestito come elemento inline o elemento di blocco. Inoltre, il layout utilizzato per i suoi figli, come flusso, flex o griglia. Inoltre, questa proprietà assegna i tipi interni ed esterni per visualizzare un elemento.

Questo post spiegherà:

• • Come usare "Display: cella da tavola" in CSS?
  • Perché utilizzare "Display: Table-Cell" in CSS?

Come usare "Display: cella da tavola" in CSS?

Per usare il "Schermo"Proprietà con il valore"cella da tavola", Prova le istruzioni fornite.

Passaggio 1: creare contenitori di div nidificati

Innanzitutto, crea il contenitore di div principale con l'aiuto di ""Tag e inserire il"id"Attributo all'interno del tag DIV. Quindi, tra il tag DIV, aggiungi più contenitori e aggiungi un "classe"Attributo in ogni div:

Herry

Si può notare che i dati sono stati aggiunti correttamente:

Passaggio 2: contenitore "contento" in stile

Per accedere al Div principale, utilizzare il “#tavolo-contenuto", Dove "#"È un selettore utilizzato per l'accesso al specificato"id"Attributo del contenitore Div. Quindi, applica le seguenti proprietà:

#Table-Content
Visualizza: tabella;
imbottitura: 7px;

Qui:

• • IL "Schermo"La proprietà definisce e determina come appare un elemento. Per fare ciò, il valore di questa proprietà è impostato come "tavolo"Per fare il tavolo.
  • "imbottitura"Assegna lo spazio all'interno del contenitore.

Passaggio 3: contenitore “TR-IV” stile

Ora, modella il "TR-IV"Container come segue:

.tr-div
Display: Table-ROW;
Background-color: RGB (164, 241, 215);
imbottitura: 7px;

Secondo il blocco sopra codi, il "Schermo"Il valore della proprietà è impostato come"Table-ROW"Il che significa che i dati sono impostati sotto forma di righe in una tabella,"colore di sfondo"La proprietà viene utilizzata per specificare il colore sul retro dell'elemento e, infine,"imbottitura" viene applicata:

Passaggio 4: applicare la proprietà "Visualizza: cellula tavolo" sul contenitore "TD-Div"

.td-div
Visualizza: cellula da tavola;
larghezza: 150px;
bordo: #0f4bf0 solido 1px;
Margine: 5px;
imbottitura: 7px;

Accedere al terzo div con l'aiuto di ".td-div"Dot Selective e il rispettivo ID e applicare le proprietà CSS indicate di seguito:

• • Il valore del "SchermoLa proprietà "è impostata come"cella da tavola"Che viene utilizzato per creare la cella e aggiungere dati alla cella.
  • "larghezza"Specifica la dimensione della cella del tavolo in orizzontale.
  • "confine"Definisce un limite attorno alle cellule.
  • "margine"La proprietà assegna lo spazio al di fuori del bordo definito.
  • "imbottitura"Specifica lo spazio all'interno del confine.

Produzione

Perché utilizzare "Display: Table-Cell" in CSS?

IL "Display: cella da tavola"La proprietà CSS viene utilizzata per l'impostazione di un display su dati che fa sì che l'elemento si comporti come una tabella. Pertanto, gli utenti possono creare un duplicato di una tabella in HTML senza utilizzare l'elemento della tabella e altri elementi, tra cui TD e TR. Più specificamente, la sua proprietà definisce i dati sotto forma di una tabella.

Conclusione

Per usare il "Display: cella da tavola"Proprietà CSS, creare contenitori di diviezze nidificati e inserire una classe in ciascun contenitore con un nome specifico. Quindi, accedi al contenitore Div in CSS e applica la proprietà "Visualizza: cellula tavolo", dove "Schermo"La proprietà viene utilizzata per l'impostazione dei dati nelle celle della tabella. Questo post ha dimostrato il metodo per l'utilizzo del display: proprietà CSS a cellule.