communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > tutoriel CSS > Pourquoi la marge ne fonctionne-t-elle pas sur les cellules d'un tableau CSS et comment puis-je ajouter un espacement à la place ?

Pourquoi la marge ne fonctionne-t-elle pas sur les cellules d'un tableau CSS et comment puis-je ajouter un espacement à la place ?

DDD
Libérer： 2024-12-07 14:25:13
original
730 Les gens l'ont consulté

Why Doesn't Margin Work on CSS Table Cells, and How Can I Add Spacing Instead?

Marges sur les cellules du tableau

En CSS, lorsque vous définissez la propriété d'affichage d'un élément sur table-cell, vous créez un structure en forme de table. Toutefois, les cellules du tableau ne sont pas affectées par la propriété margin. La propriété margin définit l'espace en dehors des bordures de l'élément, mais les cellules du tableau n'ont pas de bordures par défaut.

Cause

Selon la documentation MDN, la propriété margin s'applique à tous les éléments, à l'exception des éléments dont les types d'affichage de tableau sont autres que table-caption, table et inline-table. Par conséquent, étant donné que table-cell ne fait pas partie des types d'affichage de tableau exemptés, la propriété margin ne lui est pas applicable.

Solution

Pour obtenir l'objectif souhaité espacement entre les cellules du tableau, utilisez plutôt la propriété border-spacing. La propriété border-spacing définit l'espace entre les bordures des cellules adjacentes du tableau. Il doit être appliqué à un élément parent avec une disposition display:table et border-collapse:separate.

<br>HTML:<br><div><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><div>
Copier après la connexion

< ;/div>

CSS :
.table {

display: table;
border-collapse: separate;
border-spacing: 5px;
Copier après la connexion

}
.row {

display: table-row;
Copier après la connexion

}
.cell {

display: table-cell;
padding: 5px;
border: 1px solid black;
Copier après la connexion

}

Notez que border-spacing accepte deux valeurs pour définir des marges différentes pour les axes horizontal et vertical, si souhaité.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source：php.cn
Article précédent：Comment puis-je aligner correctement une image dans un élément HTML ? Article suivant：Pourquoi « overflow : caché » ne fonctionne-t-il pas dans une cellule de tableau et comment puis-je y remédier ?
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...
Depuis 2024-04-29 11:01:01
0
3
2190
Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?
Depuis 2024-04-23 00:22:19
0
11
2340
La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...
Depuis 2024-04-19 15:37:47
0
1
1963
Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...
Depuis 2024-04-18 23:52:34
0
1
1849
Où sont les didacticiels sur la cartographie mentale CSS ? Didacticiel
Depuis 2024-04-16 10:10:18
0
0
1905
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal