Question Définir cellpadding et cellspacing dans CSS?


Dans un tableau HTML, le cellpadding et cellspacing peut être réglé comme ceci:

<table cellspacing="1" cellpadding="1">

Comment le même peut être accompli en utilisant CSS?


2922
2017-12-04 08:45


origine


Réponses:


Notions de base

Pour contrôler "cellpadding" en CSS, vous pouvez simplement utiliser padding sur des cellules de table. Par exemple. pour 10px de "cellpadding":

td { 
    padding: 10px;
}

Pour "cellulespacing", vous pouvez appliquer le border-spacing Propriété CSS à votre table. Par exemple. pour 10px de "cellulespacing":

table { 
    border-spacing: 10px;
    border-collapse: separate;
}

Cette propriété autorisera même des espacements horizontaux et verticaux séparés, ce que vous ne pouvez pas faire avec les "cellulespacing" de la vieille école.

Problèmes d'IE <= 7

Cela fonctionnera dans presque tous les navigateurs populaires sauf pour Internet Explorer via Internet Explorer 7, où vous n'avez presque pas de chance. Je dis "presque" parce que ces navigateurs supportent toujours le border-collapse propriété, qui fusionne les frontières des cellules de table adjacentes. Si vous essayez d'éliminer les cellules (c'est-à-dire cellspacing="0") puis border-collapse:collapse devrait avoir le même effet: pas d'espace entre les cellules de la table. Ce support est buggé, car il ne remplace pas un existant cellspacing Attribut HTML sur l'élément de table.

En bref: pour les navigateurs autres qu'Internet Explorer 5-7, border-spacing vous manie. Pour Internet Explorer, si votre situation est juste (vous voulez 0 cellspacing et votre table ne l'a pas déjà défini), vous pouvez utiliser border-collapse:collapse.

table { 
    border-spacing: 0;
    border-collapse: collapse;
}

Note: Pour un bon aperçu des propriétés CSS que l'on peut appliquer aux tables et pour quels navigateurs, voir ceci page de Quirksmode fantastique.


3226
2017-07-09 02:34



Défaut

Le comportement par défaut du navigateur est équivalent à:

table {border-collapse: collapse;}
td    {padding: 0px;}

enter image description here

Cellpadding

Définit la quantité d'espace entre le contenu de la cellule et la paroi cellulaire

table {border-collapse: collapse;}
td    {padding: 6px;}

enter image description here

Cellspacing

Contrôle l'espace entre les cellules du tableau

table {border-spacing: 2px;}
td    {padding: 0px;}

enter image description here

Tous les deux

table {border-spacing: 2px;}
td    {padding: 6px;}

enter image description here

Les deux (spécial)

table {border-spacing: 8px 2px;}
td    {padding: 6px;}

enter image description here

Remarque: S'il y a border-spacing régler, cela indique border-collapse la propriété de la table est separate.

Essayez-le vous-même!

Ici vous pouvez trouver le vieux moyen html de réaliser cela.


849
2018-06-12 10:24



table
{
    border-collapse: collapse; /* 'cellspacing' equivalent */
}

table td, table th
{
    padding: 0; /* 'cellpadding' equivalent */
}

313
2017-08-24 15:17



Définir les marges sur les cellules de la table n'a pas vraiment d'effet pour autant que je sache. Le vrai équivalent CSS pour cellspacing est border-spacing - mais cela ne fonctionne pas dans Internet Explorer.

Vous pouvez utiliser border-collapse: collapse pour définir de manière fiable l'espacement des cellules à 0 comme mentionné, mais pour toute autre valeur, je pense que la seule façon de traverser le navigateur est de continuer à utiliser le cellspacing attribut.


104
2017-12-04 09:18



Ce hack fonctionne pour Internet Explorer 6 et plus tard, Google Chrome, Firefox et Opéra:

table {
    border-collapse: separate;
    border-spacing: 10px; /* cellspacing */
    *border-collapse: expression('separate', cellSpacing = '10px');
}

table td, table th {
    padding: 10px; /* cellpadding */
}

le * déclaration est pour Internet Explorer 6 et 7, et d'autres navigateurs l'ignoreront correctement.

expression('separate', cellSpacing = '10px') résultats 'separate', mais les deux instructions sont exécutées, car en JavaScript, vous pouvez transmettre plus d'arguments que prévu et tous seront évalués.


84
2017-12-05 04:30



Pour ceux qui veulent une valeur d'espacement de cellules non nulle, le CSS suivant a fonctionné pour moi, mais je suis seulement capable de le tester dans Firefox. Voir le Mode de quirks lien posté ailleurs pour les détails de compatibilité. Il semble que cela ne fonctionne pas avec les anciennes versions d'Internet Explorer.

table {
    border-collapse: separate;
    border-spacing: 2px;
}

61
2017-08-20 03:32



La solution simple à ce problème est:

table
{
    border: 1px solid #000000;
    border-collapse: collapse;
    border-spacing: 0px;
}
table td
{
    padding: 8px 8px;
}

44
2017-12-08 16:04



Aussi, si vous voulez cellspacing="0", n'oubliez pas d'ajouter border-collapse: collapse dans ton tableLa feuille de style


40
2017-12-04 09:06



Enveloppez le contenu de la cellule avec un div et vous pouvez faire tout ce que vous voulez, mais vous devez envelopper chaque cellule dans une colonne pour obtenir un effet uniforme. Par exemple, pour obtenir des marges gauche et droite plus larges:

Donc le CSS sera,

div.cellwidener {
  margin: 0px 15px 0px 15px;
}
td.tight {
  padding: 0px;
}
<table border="0">
  <tr>
    <td class="tight">
      <div class="cellwidener">My content</div>
    </td>
  </tr>
</table>

Oui, c'est un problème. Oui, cela fonctionne avec IE. En fait, je l'ai seulement testé avec IE, parce que c'est tout ce que nous sommes autorisés à utiliser au travail.


33
2018-06-19 14:57



Juste en utilisant border-collapse: collapse pour votre table, et padding pour th ou td


16
2018-01-03 03:12