Il existe plusieurs propriétés CSS pour styliser les éléments de HTML. Le ' afficher ” est l'une d'entre elles, qui est utilisée pour définir l'élément qui est géré comme un élément en ligne ou un élément de bloc. En outre, la mise en page utilisée pour ses enfants, telle que flow, flex ou grid. De plus, cette propriété alloue les types interne et externe pour afficher un élément.
Ce billet vous expliquera :
Comment utiliser 'display: table-cell' en CSS ?
Pour utiliser le ' afficher « propriété avec la valeur » cellule de table ”, essayez les instructions données.
Étape 1 : Créer des conteneurs div imbriqués
Tout d'abord, créez le conteneur div principal à l'aide du ' Pour accéder à la div principale, utilisez le ' #table-content ', où ' # ' est un sélecteur utilisé pour accéder au ' identifiant ” attribut du conteneur div. Ensuite, appliquez les propriétés suivantes : Étape 3 : Conteneur de style 'tr-div' Maintenant, stylisez le ' tr-div » conteneur comme suit : Sortir Le ' affichage : tableau-cellule ” La propriété CSS est utilisée pour définir un affichage sur des données qui font que l'élément se comporte comme un tableau. Ainsi, les utilisateurs peuvent créer une copie d'une table en HTML sans utiliser l'élément table et d'autres éléments, y compris td et tr. Plus précisément, sa propriété définit les données sous la forme d'un tableau. Pour utiliser le ' affichage : tableau-cellule ” Propriété CSS, créez des conteneurs div imbriqués et insérez une classe dans chaque conteneur avec un nom spécifique. Ensuite, accédez au conteneur div en CSS et appliquez la propriété 'display: table-cell', où le ' afficher ” La propriété est utilisée pour définir les données dans les cellules du tableau. Cet article a démontré la méthode d'utilisation de la propriété CSS display:table-cell .
< div identifiant = 'contenu de la table' >
< 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' > Edouard div >
< div classe = 'td-div' > Docker div >
div >
< div classe = 'tr-div' >
< div classe = 'td-div' > Jack div >
< div classe = 'td-div' > Gite div >
div >
div >
On peut remarquer que les données ont été ajoutées avec succès :
Étape 2 : Conteneur de style 'table-content'
affichage : tableau ;
rembourrage : 7px ;
}
Ici:
affichage : tableau-ligne ;
couleur de fond : rvb ( 164 , 241 , 215 ) ;
rembourrage : 7px ;
}
Selon le bloc de code ci-dessus, le ' afficher ' la valeur de la propriété est définie sur ' tableau-ligne ' ce qui signifie que les données sont définies sous la forme de lignes dans un tableau, ' Couleur de l'arrière plan ' La propriété est utilisée pour spécifier la couleur à l'arrière de l'élément, et enfin, ' rembourrage ' est appliqué:
Étape 4 : Appliquer la propriété « display : table-cell » sur le conteneur « td-div »
affichage : tableau-cellule ;
largeur : 150 pixels ;
frontière: #0f4bf0 solide 1px ;
marge : 5px ;
rembourrage : 7px ;
}
Accédez à la troisième div à l'aide de ' .td-div ” point sélectif et l'identifiant respectif, et appliquez les propriétés CSS indiquées ci-dessous :
Pourquoi utiliser « display : table-cell » en CSS ?
Conclusion