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

3317

Dans un tableau HTML, le cellpaddinget cellspacingpeut être défini comme ceci:

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

Comment faire la même chose en utilisant CSS?

kokos
la source
6
Juste une suggestion générale, vérifiez si votre style.css effectue une "réinitialisation" sur vos tables avant d'essayer ces solutions. Exemple: Si vous ne disposez pas des tables pour width:autoensuite border-collapsepeuvent ne pas fonctionner comme prévu.
PJ Brunet
1
Utilisez l'espacement des bordures sur la table et le rembourrage sur td.
Anubhav

Réponses:

3555

Les bases

Pour contrôler le "cellpadding" en CSS, vous pouvez simplement l'utiliser paddingsur des cellules de tableau. Par exemple, pour 10 pixels de "cellpadding":

td { 
    padding: 10px;
}

Pour "cellspacing", vous pouvez appliquer la border-spacingpropriété CSS à votre table. Par exemple, pour 10 pixels de "cellule d'espacement":

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

Cette propriété permettra même un espacement horizontal et vertical séparé, ce que vous ne pourriez pas faire avec un "espace cellulaire" à l'ancienne.

Problèmes dans IE <= 7

Cela fonctionnera dans presque tous les navigateurs populaires, à l'exception d'Internet Explorer jusqu'à Internet Explorer 7, où vous n'avez presque pas de chance. Je dis «presque» car ces navigateurs prennent toujours en charge la border-collapsepropriété, qui fusionne les bordures des cellules de tableau adjacentes. Si vous essayez d'éliminer l'espacement des cellules (c'est-à-dire cellspacing="0") , cela border-collapse:collapsedevrait avoir le même effet: pas d'espace entre les cellules du tableau. Cette prise en charge est boguée, cependant, car elle ne remplace pas un cellspacingattribut HTML existant sur l'élément de table.

En bref: pour les navigateurs non Internet Explorer 5-7, border-spacingvous gère. Pour Internet Explorer, si votre situation est parfaite (vous voulez 0 espace de cellule et votre table ne l'a pas déjà défini), vous pouvez utiliser border-collapse:collapse.

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

Remarque: Pour un excellent aperçu des propriétés CSS que l'on peut appliquer aux tableaux et pour quels navigateurs, consultez cette fantastique page Quirksmode .

Eric Nguyen
la source
27
cellpadding = "0" peut toujours faire une différence dans Chrome 13.0.782.215, même si border-collapse: collapse et border-spacing sont appliqués au tableau.
whitneyland
7
@LeeWhitney, vous devez définir un remplissage: 0 sur les cellules de votre tableau.
Martin Ørding-Thomsen
7
C'est un peu hors sujet, mais les attributs cellpadding et cellspacing sont supprimés en HTML5, donc CSS est le seul moyen d'aller maintenant.
Ignas2526
12
Salut à tous. J'ai mis à jour la réponse pour plus de clarté, y compris une section sur le rembourrage cellulaire, que j'avais pensé évidente (utilisez simplement "padding"). J'espère que c'est plus utile maintenant.
Eric Nguyen
4
Certes, @vapcguy, dans toutes les autres situations infiniment variables dans lesquelles vous pouvez styliser un tableau, vous devrez définir des sélecteurs plus spécifiques. Les éléments ci-dessus sont indiqués à titre d'exemples.
Eric Nguyen
942

Défaut

Le comportement par défaut du navigateur équivaut à:

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

         Entrez la description de l'image ici

Cellpadding

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

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

        Entrez la description de l'image ici

Espacement cellulaire

Contrôle l'espace entre les cellules du tableau

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

        Entrez la description de l'image ici

Tous les deux

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

        Entrez la description de l'image ici

Les deux (spécial)

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

        Entrez la description de l'image ici

Remarque: S'il est border-spacingdéfini, cela indique que la border-collapsepropriété de la table estseparate .

Essayez-le vous-même!

Ici vous pouvez trouver l'ancienne HTML d' y parvenir.

Peter Mortensen
la source
1
Comment l'espacement autour de la table disparaît-il? Quand je tournerai « border-spacing: 8px 12px, il ajoute l'espacement non seulement entre, mais entre la frontière de la table et les cellules extérieures , mais qui n'est pas représenté dans les images ici, ils sont alignés à gauche!.
Kaz
1
@ 2astalavista Et malheureusement, si quelqu'un veut que l'effet de l'espacement extérieur soit supprimé, cela ne fonctionnera pas de cette façon avec ces attributs CSS.
Kaz
@Kaz Vous devrez peut-être utiliser une marge négative pour masquer cette partie ennuyeuse.
2
Le remplissage par défaut sur TD est généralement 1px, pas 0
Jan M
341
table
{
    border-collapse: collapse; /* 'cellspacing' equivalent */
}

table td, table th
{
    padding: 0; /* 'cellpadding' equivalent */
}
Chiot
la source
2
C'est en fait la seule chose que j'ai pu travailler pour moi, bien que j'aie appliqué les informations à un identifiant pour éviter d'être trop général.
Kzqai
20
C'est cellspacing=0équivalent. L'équivalent de cellspacing=1est complètement différent. Voir la réponse acceptée.
TRiG
3
Ne devrait-il pas table tdet table thseulement être tdet threspectivement? Cela fonctionne de toute façon, mais un sélecteur plus petit signifie une correspondance légèrement plus rapide
Cole Johnson
1
@Cole En fait, je pense que ça devrait être table > tr > tdet table > tr > th. C'est presque aussi rapide que tret th, et il est garanti de fonctionner si vous avez une table imbriquée. Just my 2c
leviathanbadger
@ aboveyou00 mais le tablesélecteur est-il nécessaire? IIRC, a <td>est invalide sauf à l'intérieur de a <tr>.
Cole Johnson
114

La définition de marges sur les cellules d'un tableau n'a pas vraiment d'effet à ma connaissance. Le véritable équivalent CSS pour cellspacingestborder-spacing - mais cela ne fonctionne pas dans Internet Explorer.

Vous pouvez utiliser border-collapse: collapsepour 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 inter-navigateur est de continuer à utiliser l' cellspacingattribut.

Will Prescott
la source
47
De nos jours, cette réalité est un suckage au Nième degré.
John K
7
C'est presque correct, mais cela border-collapsene fonctionne dans IE 5-7 que si la table n'a pas déjà un cellspacingattribut défini. J'ai écrit une réponse complète qui fusionne toutes les parties correctes des autres réponses sur cette page au cas où cela serait utile.
Eric Nguyen
Pour être honnête, qui se soucie d'Internet Explorer? Quiconque l'utilise doit savoir que les sites Web cassés sont de sa faute - pour avoir utilisé un navigateur de si faible qualité. Les sites Web ne devraient pas avoir à gérer cela. Laissez Internet Explorer se perdre. Oubliez le support. Nous n'en avons pas besoin, et c'est difficile à développer.
99

Ce hack fonctionne pour Internet Explorer 6 et versions ultérieures, Google Chrome , Firefox et Opera :

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

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

La *déclaration concerne Internet Explorer 6 et 7 et les autres navigateurs l'ignoreront correctement.

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

Vitalii Fedorenko
la source
pour ceux qui tentent de recevoir des e-mails réactifs, notez que * n'est pas reconnu par Outlook 2007+ (utilise Word comme moteur de rendu) campaignmonitor.com/css
ptim
71

Pour ceux qui veulent une valeur d'espacement des cellules non nulle, le CSS suivant a fonctionné pour moi, mais je ne peux le tester que dans Firefox.

Voir le lien Quirksmode publié 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;
}
Malvineous
la source
54

La solution simple à ce problème est:

table
{
    border: 1px solid #000000;
    border-collapse: collapse;
    border-spacing: 0px;
}
table td
{
    padding: 8px 8px;
}
George Filippakos
la source
49

De plus, si vous le souhaitez cellspacing="0", n'oubliez pas d'ajouter border-collapse: collapsevotre tablefeuille de style.

tapis
la source
43

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:

Ainsi, 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 Internet Explorer. En fait, je n'ai testé cela qu'avec Internet Explorer, car c'est tout ce que nous sommes autorisés à utiliser au travail.

Robert White
la source
J'aimerais pouvoir voter davantage ... Premier exemple qui n'a pas répété les autres et celui qui montre comment limiter l'effet à un seul tableau ou une seule cellule, au lieu de tous sur la page !!!
vapcguy
23

Utilisez simplement border-collapse: collapsepour votre table, et paddingpour thou td.

Dan
la source
21

Ce style est destiné à une réinitialisation complète des tableaux - remplissage de cellule , espacement des cellules et bordures .

J'avais ce style dans mon fichier reset.css:

table{
    border:0;          /* Replace border */
    border-spacing: 0px; /* Replace cellspacing */
    border-collapse: collapse; /* Patch for Internet Explorer 6 and Internet Explorer 7 */
}
table td{
    padding: 0px; /* Replace cellpadding */
}
Elad Shechter
la source
20

TBH. Pour tous les fannings autour de CSS, vous pourriez aussi bien utiliser cellpadding="0" cellspacing="0"car ils ne sont pas obsolètes ...

Quiconque suggère des marges sur <td>n'a évidemment pas essayé cela.

correcteur
la source
35
Ils sont en fait obsolètes en html5.
Kzqai
18
table th,td {
    padding: 8px 2px;
}
table {
    border-collapse: separate;
    border-spacing: 2px;
}
Abhishek Singh
la source
17

Utilisez simplement les règles de remplissage CSS avec les données de table:

td { 
    padding: 20px;
}

Et pour l'espacement des bordures:

table { 
    border-spacing: 1px;
    border-collapse: collapse;
}

Cependant, cela peut créer des problèmes dans les anciennes versions de navigateurs comme Internet Explorer en raison de l'implémentation différente du modèle de boîte.

suraj rawat
la source
15

D'après ce que je comprends des classifications du W3C, les <table>s sont destinés à afficher des données «uniquement».

Sur cette base, j'ai trouvé beaucoup plus facile de créer un <div>avec les arrière-plans et tout cela et d'avoir un tableau avec des données flottant dessus en utilisant position: absolute;etbackground: transparent; ...

Il fonctionne sur Chrome, Internet Explorer (6 et versions ultérieures) et Mozilla Firefox (2 et versions ultérieures).

Les marges sont utilisées (ou entend toute façon) pour créer un espacement entre des éléments de récipient, comme <table>, <div>et <form>non <tr>, <td>, <span>ou <input>. L'utiliser pour autre chose que des éléments de conteneur vous gardera occupé à ajuster votre site Web pour les futures mises à jour du navigateur.

RolanDecoy
la source
7
OP n'a jamais indiqué à quoi il utilisait la table.
Alfabravo
13

CSS:

selector{
    padding:0 0 10px 0; // Top left bottom right 
}
suraj rawat
la source
12

Vous pouvez facilement définir le remplissage à l'intérieur des cellules du tableau à l'aide de la propriété de remplissage CSS. C'est un moyen valide pour produire le même effet que l'attribut cellpadding du tableau.

table,
th,
td {
  border: 1px solid #666;
}

table th,
table td {
  padding: 10px;
  /* Apply cell padding */
}
<!DOCTYPE html>
<html lang="en">
<head>

  <meta charset="utf-8">
  <title>Set Cellpadding in CSS</title>

</head>

<body>

  <table>
    <thead>
      <tr>
        <th>Row</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Clark</td>
        <td>Kent</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Peter</td>
        <td>Parker</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>3</td>
        <td>John</td>
        <td>Rambo</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
  </table>

</body>
</html>

De même, vous pouvez utiliser la propriété CSS border-spacing pour appliquer l'espacement entre les bordures de cellules de tableau adjacentes comme l'attribut cellspacing. Cependant, afin de travailler l'espacement des bordures, la valeur de la propriété border-collapse doit être distincte, ce qui est par défaut.

table {
  border-collapse: separate;
  border-spacing: 10px;
  /* Apply cell spacing */
}

table,
th,
td {
  border: 1px solid #666;
}

table th,
table td {
  padding: 5px;
  /* Apply cell padding */
}
<!DOCTYPE html>
<html lang="en">
<head>

  <meta charset="utf-8">
  <title>Set Cellspacing in CSS</title>

</head>

<body>

  <table>
    <thead>
      <tr>
        <th>Row</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Clark</td>
        <td>Kent</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Peter</td>
        <td>Parker</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>3</td>
        <td>John</td>
        <td>Rambo</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
  </table>

</body>
</html>

Rafiqul Islam
la source
10

Essaye ça:

table {
    border-collapse: separate;
    border-spacing: 10px;
}
table td, table th {
    padding: 10px;
}

Ou essayez ceci:

table {
    border-collapse: collapse;
}
table td, table th {
    padding: 10px;
}
Falguni Panchal
la source
9

J'ai utilisé !importantaprès l'effondrement de la frontière comme

border-collapse: collapse !important;

et cela fonctionne pour moi dans IE7. Il semble remplacer l'attribut cellspacing.

Håkan Nilsson
la source
9
!importantne serait nécessaire que pour remplacer d' autres paramètres CSS dans une situation complexe (et même alors, principalement une mauvaise approche).
Jukka K. Korpela
1
Également une répétition de la réponse de Dan, ajoute juste le !important, qui aurait pu être inclus en tant que commentaire au lieu d'une autre réponse.
vapcguy
8
<table>
    <tr>
        <th>Col 1</th>
        <th>Col 2</th>
        <th>Col 3</th>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>

cell-paddingpeut être donné par paddingen CSS tandis que cell-spacingpeut être défini en définissant border-spacingune table.

table {
    border-spacing: 10px;
}
td {
    padding: 10px;
}

Violon .

fuddin
la source
6
td {
    padding: npx; /* For cellpadding */
    margin: npx; /* For cellspacing */
    border-collapse: collapse; /* For showing borders in a better shape. */
}

Si marginne fonctionne pas, essayez de définir displaydes trà blocket la marge fonctionnera.

Majid Sadr
la source
5

Pour les tableaux, l'espacement des cellules et le remplissage des cellules sont obsolètes dans HTML 5.

Maintenant, pour l'espacement des cellules, vous devez utiliser l'espacement des bordures. Et pour le rembourrage cellulaire, vous devez utiliser border-collapse.

Et assurez-vous de ne pas l'utiliser dans votre code HTML5. Essayez toujours d'utiliser ces valeurs dans un fichier CSS 3.

Pushp Singh
la source
5
table {
    border-spacing: 4px; 
    color: #000; 
    background: #ccc; 
}
td {
    padding-left: 4px;
}
Peter Mortensen
la source
4

Dans un tableau HTML, le cellpaddinget cellspacingpeut être défini comme ceci:

Pour le rembourrage cellulaire :

Appelez simplement une td/thcellule simple padding.

Exemple:

table {
    border-collapse: collapse;
}

td {
  border: 1px solid red;
  padding: 10px;
}

Pour l'espacement des cellules

Appelez simplement simple table border-spacing

Exemple:

/********* Cell-Spacing   ********/
table {
    border-spacing: 10px;
    border-collapse: separate;
}

td {
  border: 1px solid red;
}

Plus de style de tableau par lien source CSS ici, vous obtenez plus de style de tableau par CSS .

MD Ashik
la source
3

Vous pouvez simplement faire quelque chose comme ça dans votre CSS, en utilisant border-spacinget padding:

table {
  border-collapse: collapse;
}

td, th {
  padding: 1em;
  border: 1px solid blue;
}
<table>
  <tr>
    <th>head_1</th>
    <th>head_2</th>
    <th>head_3</th>
    <th>head_4</th>
  </tr>
  <tr>
    <td>txt_1</td>
    <td>txt_2</td>
    <td>txt_3</td>
    <td>txt_4</td>
  </tr>
</table>

Alireza
la source
La règle d'espacement des bordures est ignorée lorsque les bordures sont réduites.
dgrogan
0

Que diriez-vous d'ajouter le style directement à la table elle-même? C'est au lieu d'utiliser tabledans votre CSS, ce qui est une mauvaise approche si vous avez plusieurs tables sur votre page:

<table style="border-collapse: separate;border-spacing: 2px;">
    <tr>
        <td style="padding: 4px 4px;">Some Text</td>
    </tr>
</table>
vapcguy
la source
2
Mettre "style" dans la balise table est pire que de mettre "table # someId" dans votre css, car le style doit être séparé du contenu. Mais le point principal de la question est de savoir comment convertir le HTML obsolète en CSS approprié. Ce que vous avez correctement fait, mais vous n'avez vraiment rien ajouté à votre réponse et vous vous concentrez sur un problème sans rapport.
Teepeemm
1
Rien ajouté?! Ce que j'ai ajouté était de se concentrer sur la façon dont toutes les autres réponses ici disent essentiellement d'utiliser td { padding: ... }ou table { border-spacing: ... }, au lieu de l'appliquer directement au tableau. Cela n'ajoute rien. Comme je l'ai dit, lorsque vous avez plusieurs tableaux sur votre page et que vous ne voulez pas les affecter, vous ne voulez pas cela! Nous n'avons pas besoin d'une page entière de réponses disant "Utilisez la feuille de style!", Alors que c'est peut-être la dernière chose que vous voulez, car vous ne souhaitez mettre en forme qu'une cellule ou un tableau. C'est quand l'appliquer à tableou tdn'est pas souhaitable et créer une toute nouvelle classe car c'est exagéré.
vapcguy
1
Toutes les autres réponses utilisent une feuille de style car la question d'origine était "comment puis-je faire cela avec css". Si la question avait été "comment puis-je faire en sorte que css n'affecte que ce seul tableau", alors votre réponse serait plus appropriée (même si je serais toujours en faveur table#someId).
Teepeemm
2
Techniquement, le style en ligne est toujours CSS, mais n'utilise pas de feuille de style, mais je comprends votre point.
vapcguy
1
Parce que l'idée derrière une classe est la réutilisabilité. Pour une seule fois, cela n'a pas de sens et est exagéré, à mon humble avis.
vapcguy
0

Je suggère cela et toutes les cellules du tableau particulier sont effectuées.

table.tbl_classname td, th {
    padding: 5px 5px 5px 4px   ;
 }

Greggo
la source
0

Vous pouvez vérifier le code ci-dessous juste créer un index.htmlet l'exécuter.

<!DOCTYPE html>
<html>
   <head>
      <style>
         table{
         border-spacing:10px;
         }
         td{
         padding:10px;
         }
      </style>
   </head>
   <body>
      <table cellspacing="0" cellpadding="0">
         <th>Col 1</th>
         <th>Col 2</th>
         <th>Col 3</th>
         <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
         </tr>
      </table>
   </body>
</html>

PRODUCTION :

entrez la description de l'image ici

Amaresh Tiwari
la source