web-dev-qa-db-fra.com

Contrôle de l'espacement entre les cellules de la table

J'essaie de créer un tableau où chaque cellule a une couleur d'arrière-plan avec un espace blanc entre elles. Mais il me semble avoir du mal à faire cela.

J'ai essayé de définir td marges, mais cela ne semble pas avoir d'effet.

table.myclass td {
    background-color: Lime;
    margin: 12px 12px 12px 12px;
}​

Si je fais la même chose avec le rembourrage, cela fonctionne, mais alors je n'ai pas l'espacement entre les cellules.

Est-ce que quelqu'un pourrait m'aider avec ça?

jsFiddle: http://jsfiddle.net/BfBSM/

htmlcsscss-tables
53
Jonathan Wood

Utilisez le border-spacing propriété sur l'élément table pour définir l'espacement entre les cellules.

Assure-toi border-collapse est réglé sur separate (ou il y aura une bordure unique entre chaque cellule au lieu d’une bordure séparée autour de chaque cellule pouvant être espacée).

77
Quentin

Vérifiez ceci violon . Vous allez devoir vous pencher sur l'utilisation de la réduction et de l'espacement des frontières. Il y a quelques problèmes pour IE (comme d'habitude). Ceci est basé sur ne réponse à cette question .

HTML:

<table class="test">
    <tr>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
    </tr>
    <tr>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
    </tr>
    <tr>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
    </tr>
</table>​

CSS:

table.test td {
    background-color: Lime;
    margin: 12px 12px 12px 12px;
    padding: 12px 12px 12px 12px;
}
table.test {
    border-collapse: separate;
    border-spacing: 10px;
    *border-collapse: expression('separate', cellSpacing = '10px');
}
19
Buggabill

Pour faire le travail, utilisez

<table cellspacing=12>

Si vous préférez "avoir raison" que de faire avancer les choses, vous pouvez utiliser la propriété CSS border-spacing, supporté par certains navigateurs.

3
Jukka K. Korpela
table.test td {
    background-color: Lime;
    padding: 12px;
    border:2px solid #fff;border-collapse:separate;
}
3
Web Designer cum Promoter

Utilisez border-collapse et border-spacing pour obtenir des espaces entre les cellules du tableau. Je ne recommanderais pas l'utilisation de cellules flottantes comme suggéré par QQping.

JSFiddle

1
Halcyon