Définir l'espacement et l'espacement des cellules en CSS ?

Question

Dans un tableau HTML, l'élément cellpadding y cellspacing peut être défini comme suit :

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

Comment peut-on faire la même chose avec CSS ?

Answer 1

Principes de base

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

td { 
    padding: 10px;
}

Pour l'"espacement des cellules", vous pouvez appliquer la méthode border-spacing CSS à votre tableau. Par exemple, pour 10px de "cellspacing" :

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

Cette propriété permet même de séparer l'espacement horizontal et l'espacement vertical, ce qui n'était pas possible avec l'ancien "espacement des cellules".

Problèmes avec IE ≤ 7

Cela fonctionnera dans presque tous les navigateurs courants, à l'exception d'Internet Explorer jusqu'à Internet Explorer 7, où vous n'aurez presque pas de chance. Je dis "presque" parce que ces navigateurs prennent toujours en charge le format border-collapse qui fusionne les bordures des cellules de tableau adjacentes. Si vous essayez d'éliminer l'espacement des cellules (c'est-à-dire, cellspacing="0" ) alors border-collapse:collapse devrait avoir le même effet : pas d'espace entre les cellules du tableau. Cette prise en charge est cependant boguée, car elle ne remplace pas une fonction existante de l'option cellspacing attribut HTML de l'élément table.

En bref : pour les navigateurs autres qu'Internet Explorer 5-7, border-spacing s'occupe de vous. Pour Internet Explorer, si votre situation est parfaite (vous voulez un espacement de 0 cellule et votre tableau ne l'a pas déjà défini), vous pouvez utiliser border-collapse:collapse .

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

Note : Pour une excellente vue d'ensemble des propriétés CSS que l'on peut appliquer aux tableaux et pour quels navigateurs, voir ceci fantastique page Quirksmode .

Answer 2

Défaut

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

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

         

Cellpadding

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

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

        

Espacement des cellules

Contrôle l'espace entre les cellules du tableau

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

        

Les deux

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

        

Les deux (spécial)

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

        

Remarque : S'il y a border-spacing il indique border-collapse du tableau est separate .

Essayez-le vous-même !

Ici vous pouvez trouver l'ancienne méthode HTML pour y parvenir.

Answer 3

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

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

Answer 4

Le réglage des marges sur les cellules des tableaux n'a pas vraiment d'effet, pour autant que je sache. Le véritable équivalent CSS de cellspacing est border-spacing - mais il ne fonctionne pas dans Internet Explorer.

Vous pouvez utiliser border-collapse: collapse pour régler de manière fiable l'espacement des cellules à 0, mais pour toute autre valeur, je pense que la seule solution inter-navigateurs est de continuer à utiliser la fonction cellspacing attribut.

Answer 5

Cette astuce fonctionne avec Internet Explorer 6 et les versions ultérieures, 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 */
}

En * La déclaration est destinée à Internet Explorer 6 et 7, et les autres navigateurs l'ignoreront.

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