Hi ha diverses propietats CSS per dissenyar els elements d'HTML. El ' visualització ” és una d'elles, que s'utilitza per configurar l'element que es gestiona com a element en línia o element de bloc. A més, el disseny utilitzat per als seus fills, com ara flow, flex o quadrícula. A més, aquesta propietat assigna els tipus interior i exterior per mostrar un element.
Aquesta publicació explicarà:
Com utilitzar 'display: table-cell' a CSS?
Per utilitzar el ' visualització 'propietat amb el valor' taula-cel·la ”, prova les instruccions donades.
Pas 1: feu contenidors div nius
Primer, creeu el contenidor div principal amb l'ajuda del ' Per accedir al div principal, utilitzeu el ' #contingut-taula ”, on “ # ' és un selector que s'utilitza per accedir a l'especificat ' id ” atribut del contenidor div. A continuació, apliqueu les propietats següents: Pas 3: Estil el contenidor 'tr-div'. Ara, estilitza el ' tr-div ” contenidor de la següent manera: Sortida El ' pantalla: cel·la-taula La propietat CSS s'utilitza per configurar una visualització de dades que fan que l'element es comporti com una taula. Així, els usuaris poden crear un duplicat d'una taula en HTML sense utilitzar l'element de la taula i altres elements, inclosos td i tr. Més concretament, la seva propietat defineix les dades en forma de taula. Per utilitzar el ' pantalla: cel·la-taula ” Propietat CSS, creeu contenidors div imbricats i inseriu una classe a cada contenidor amb un nom específic. A continuació, accediu al contenidor div en CSS i apliqueu la propietat 'display: table-cell', on el ' visualització ” s'utilitza per configurar les dades a les cel·les de la taula. Aquesta publicació va demostrar el mètode per utilitzar la propietat CSS display:table-cell.
< div id = 'contingut de la taula' >
< div classe = 'tr-div' >
< div classe = 'td-div' > Harry div >
< div classe = 'td-div' > HTML / CSS div >
div >
< div classe = 'tr-div' >
< div classe = 'td-div' > Edward div >
< div classe = 'td-div' > Docker div >
div >
< div classe = 'tr-div' >
< div classe = 'td-div' > Jack div >
< div classe = 'td-div' > Git div >
div >
div >
Es pot notar que les dades s'han afegit correctament:
Pas 2: Estil el contenidor de 'contingut de la taula'.
pantalla: taula;
farciment: 7px;
}
Aquí:
pantalla: taula-fila;
color de fons: rgb ( 164 , 241 , 215 ) ;
farciment: 7px;
}
Segons el bloc de codi anterior, el ' visualització El valor de la propietat s'estableix com a taula-fila ', que significa que les dades s'estableixen en forma de files en una taula,' color de fons La propietat 's'utilitza per especificar el color a la part posterior de l'element i, finalment, ' farciment ” s'aplica:
Pas 4: apliqueu la propietat 'display: table-cell' al contenidor 'td-div'.
visualització: cel·la-taula;
amplada: 150 píxels;
frontera: #0f4bf0 sòlid 1px;
marge: 5 píxels;
farciment: 7px;
}
Accediu al tercer div amb l'ajuda de ' .td-div ” punt selectiu i l'identificador respectiu i apliqueu les propietats CSS que s'indiquen a continuació:
Per què utilitzar 'display: table-cell' a CSS?
Conclusió