Définir cellpadding et cellpacing dans CSS?

StackOverflow https://stackoverflow.com/questions/339923

Question

Dans un tableau HTML, les cellpadding et cellspacing peuvent être définis comme suit: 

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

Comment peut-on accomplir la même chose en utilisant CSS?

Était-ce utile?

La solution

Basics

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

td { 
    padding: 10px;
}

Pour & "cellpacing &", vous pouvez appliquer la propriété border-spacing CSS à votre table. Par exemple. pour 10px de & "quotient cellulaire" " 

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

Cette propriété permet même un espacement horizontal et vertical séparé, ce que vous ne pouviez pas faire avec la vieille école & "Cellpacing &";.

Problèmes liés à Internet Explorer < = 7

Cela fonctionnera dans presque tous les navigateurs courants, à l'exception d'Internet & nbsp; Explorer jusqu'à Internet & nbsp; Explorer & nbsp; 7, où vous n'avez presque pas de chance. Je dis & «Presque &»; car ces navigateurs prennent toujours en charge la propriété border-collapse, qui fusionne les bordures des cellules de tableau adjacentes. Si vous essayez d'éliminer le 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 toutefois problématique, car elle ne remplace pas un attribut cellspacing HTML existant sur l'élément de table.

En bref: pour les navigateurs non Internet & nbsp; Explorer 5-7, <=> vous gère. Pour Internet & Nbsp; Explorer, si votre situation est satisfaisante (vous voulez 0 cellule et que votre table ne l’ait pas déjà définie), vous pouvez utiliser <=>. 

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

Remarque: pour un bon aperçu des propriétés CSS que vous pouvez appliquer aux tableaux et pour quels navigateurs, consultez ceci page fantastique Quirksmode .

Autres conseils

Par défaut

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

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

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; 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;}

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; Entrez la description de l'image ici

Espacement des cellules

Contrôle l'espace entre les cellules du tableau 

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

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; Entrez la description de l'image ici

Les deux 

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

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; Entrez la description de l'image ici

Les deux (spécial) 

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

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; Entrez la description de l'image ici

  

Remarque: Si border-spacing est défini, cela indique que la propriété border-collapse de la table est separate.

Essayez-le vous-même!

Ici , vous pouvez trouver l’ancien moyen HTML d’y parvenir. 

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

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

Le fait de définir des marges sur les cellules d'un tableau n'a pas vraiment d'effet à ma connaissance. Le véritable équivalent CSS pour cellspacing est border-spacing - mais cela ne fonctionne pas dans Internet & Nbsp; Explorer.

Vous pouvez utiliser border-collapse: collapse pour définir de manière fiable l'espacement des cellules sur 0 comme indiqué, mais pour toute autre valeur, je pense que le seul moyen de naviguer entre plusieurs navigateurs est de continuer à utiliser l'attribut <=>.

Ce hack fonctionne pour Internet & nbsp; Explorer & nbsp; 6 et ultérieur, 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 & nbsp; 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. En JavaScript, vous pouvez transmettre plus d'arguments que prévu et tous seront évalués.

Pour ceux qui veulent une valeur de cellule pas différente de zéro, le CSS suivant a fonctionné pour moi, mais je ne peux le tester que dans Firefox.

Voir le lien Quirksmode posté ailleurs pour plus de détails sur la compatibilité. Il semble que cela ne fonctionne peut-être pas avec les anciennes versions Internet & Nbsp; Explorer. 

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

La solution simple à ce problème est la suivante: 

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

De même, si vous voulez cellspacing="0", n'oubliez pas d'ajouter border-collapse: collapse dans la feuille de style de votre table.

Enveloppez le contenu de la cellule avec un div et vous pouvez faire ce que vous voulez, mais vous devez envelopper chaque cellule dans une colonne pour obtenir un effet uniforme. Par exemple, pour élargir à gauche & Amp; marges de droite:

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

Utilisez simplement border-collapse: collapse pour votre table et padding pour th ou td.

TBH. Pour tout le plaisir avec les CSS, vous pouvez 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é cette solution.

Ce style est destiné aux réinitialisations complètes des tableaux : cellpadding , 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 */
}

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

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, il peut créer des problèmes dans les anciennes versions de navigateurs tels qu'Internet & nbsp; Explorer en raison de la mise en œuvre diff du modèle de boîte.

D'après ce que j'ai compris des classifications W3C, les <table> s sont destinés à l'affichage de données "uniquement".

Sur cette base, il m'a été beaucoup plus facile de créer un <div> avec les arrière-plans et tout le reste et d'avoir une table avec des données flottant dessus en utilisant position: absolute; et background: transparent; ...

Cela fonctionne sous Chrome, Internet & nbsp; Explorer (à partir de 6 ans) et Mozilla Firefox (à partir de 2 ans).

Les marges sont utilisées (ou supposées de toute façon) pour créer un espaceur entre les éléments de conteneur, tels que <form>, <tr> et <td>, et non pas <span>, <input>, <=> ou <=>. Son utilisation pour autre chose que des éléments de conteneur vous obligera à ajuster votre site Web pour les futures mises à jour du navigateur.

CSS: 

selector{
    padding:0 0 10px 0; // Top left bottom right 
}

Essayez ceci: 

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;
}

J'ai utilisé !important après l'effondrement de la bordure comme 

border-collapse: collapse !important;

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

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 valable de produire le même effet que l'attribut cellpadding de la table. 

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>clarkkent@mail.com</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Peter</td>
        <td>Parker</td>
        <td>peterparker@mail.com</td>
      </tr>
      <tr>
        <td>3</td>
        <td>John</td>
        <td>Rambo</td>
        <td>johnrambo@mail.com</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 séparée, ce qui est la valeur 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>clarkkent@mail.com</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Peter</td>
        <td>Parker</td>
        <td>peterparker@mail.com</td>
      </tr>
      <tr>
        <td>3</td>
        <td>John</td>
        <td>Rambo</td>
        <td>johnrambo@mail.com</td>
      </tr>
    </tbody>
  </table>

</body>
</html>

<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-padding peut être indiqué par padding en CSS, tandis que cell-spacing peut être défini en définissant border-spacing pour le tableau. 

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

Fiddle . 

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

Si margin n'a pas fonctionné, essayez de définir display sur tr sur block pour que la marge fonctionne.

Pour les tableaux, cellpacing et cellpadding sont obsolètes en HTML 5.

Maintenant, pour l'espacement de cellules, vous devez utiliser un espacement de bordure. Et pour cellpadding, 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 & Nbsp; 3. 

table {
    border-spacing: 4px; 
    color: #000; 
    background: #ccc; 
}
td {
    padding-left: 4px;
}

Vous pouvez simplement faire quelque chose comme ceci dans votre CSS, en utilisant border-spacing et 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>

Dans un tableau HTML, les cellpadding et cellspacing peuvent être définis comme suit:

Pour le remplissage des cellules :

Appelez simplement td/th une cellule padding.

Exemple: 

/******Call-Padding**********/

table {
    border-collapse: collapse;
}

td {
  border: 1px solid red;
  padding: 10px;
}
<table>
        <tr>
            <th>Head1 </th>
            <th>Head2 </th>
            <th>Head3 </th>
            <th>Head4 </th>
        </tr>
        <tr>
            <td>11</td>
            <td>12</td>
            <td>13</td>
            <td>14</td>
        </tr>
        <tr>
            <td>21</td>
            <td>22</td>
            <td>23</td>
            <td>24</td>
        </tr>
        <tr>
            <td>31</td>
            <td>32</td>
            <td>33</td>
            <td>34</td>
        </tr>
        <tr>
            <td>41</td>
            <td>42</td>
            <td>43</td>
            <td>44</td>
        </tr>
    </table>

table {
    border-collapse: collapse;
}

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

Pour espacement des cellules

Il suffit d'appeler simplement table border-spacing

Exemple: 

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

td {
  border: 1px solid red;
}
<table>
        <tr>
            <th>Head1</th>
            <th>Head2</th>
            <th>Head3</th>
            <th>Head4</th>
        </tr>
        <tr>
            <td>11</td>
            <td>12</td>
            <td>13</td>
            <td>14</td>
        </tr>
        <tr>
            <td>21</td>
            <td>22</td>
            <td>23</td>
            <td>24</td>
        </tr>
        <tr>
            <td>31</td>
            <td>32</td>
            <td>33</td>
            <td>34</td>
        </tr>
        <tr>
            <td>41</td>
            <td>42</td>
            <td>43</td>
            <td>44</td>
        </tr>
    </table>

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

td {
  border: 1px solid red;
}

Plus de styles de tableau par lien de source CSS vous obtenez davantage de style de tableau par CSS .

Pourquoi ne pas ajouter le style directement à la table? Ceci remplace l'utilisation de table dans votre CSS, ce qui est une approche MAUVAISE si vous avez plusieurs tableaux sur votre page: 

<table style="border-collapse: separate;border-spacing: 2px;">
    <tr>
        <td style="padding: 4px 4px;">Some Text</td>
    </tr>
</table>
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top