Ajouter un espace entre les cellules (td) en utilisant CSS

90

J'essaie d'ajouter un tableau avec un espace entre la cellule car la couleur d'arrière-plan de la cellule est blanche et la couleur d'arrière-plan du tableau est bleue, vous pouvez facilement voir que le rembourrage et la marge ne fonctionnent pas (je l'applique au td), cela ne fera qu'ajouter de l'espace à l'intérieur de la cellule.

html css Amra
la source
2
duplication possible de Comment définir cellpadding et cellspacing en CSS?
utilisateur

Réponses:

116

Vous voulez border-spacing:

<table style="border-spacing: 10px;">

Ou dans un bloc CSS quelque part:

table {
  border-spacing: 10px;
}

Voir quirksmode sur border-spacing. Sachez que border-spacingcela ne fonctionne pas sur IE7 et les versions antérieures.

Dominic Rodger
la source
2
dans IE7 et les versions antérieures, vous pouvez utiliser l'attribut cellspacing dans la balise table. Vous pouvez également fournir les deux pour le faire fonctionner dans IE. D'autres navigateurs donneront la priorité au style.
Tor Valamo
36 
table { 
  border-spacing: 10px; 
}

Cela a fonctionné pour moi une fois que j'ai supprimé 

border-collapse: separate;

de mon étiquette de table.

Kelly
la source
1
séparé au lieu de séparé, mais cela m'a aidé :-)
FredRoger
Ouais, je ne savais pas que tu devais aussi changer le «border-collapse». Cela devrait être la bonne réponse.
jleggio
31

Le mien est:

border-spacing: 10px;
border-collapse: separate;
JanBorup
la source
1
je dois ajouter la propriété css boder-collapse pour que la marge prenne effet. merci
ufk le
4

Pensez à utiliser cellspacinget les cellpaddingattributs pour la tablebalise ou la border-spacingpropriété css.

Kniganapolke
la source
4

Le paramètre cellspacing (distance entre les cellules) de la balise TABLE est exactement ce que vous voulez. L'inconvénient est qu'il s'agit d'une valeur, utilisée à la fois pour x et y, vous ne pouvez pas choisir un espacement ou un remplissage différent verticalement / horizontalement. Il existe également une propriété CSS, mais elle n'est pas largement prise en charge.

SF.
la source
2

Supposons que cellspcing/ cellpadding/ border-spacingproperty ne fonctionne pas, vous pouvez utiliser le code comme suit.

<div class="form-group">
  <table width="100%" cellspacing="2px" style="border-spacing: 10px;">
    <tr>                        
      <td width="47%">
        <input type="submit" class="form-control btn btn-info" id="submit" name="Submit" />
      </td>
      <td width="5%"></td>
      <td width="47%">
        <input type="reset" class="form-control btn btn-info" id="reset" name="Reset" />
      </td>
    </tr>
  </table>
</div>

J'ai essayé et réussi en séparant le bouton en utilisant la largeur de la table et en faisant un td vide à 2 ou 1%, il ne renvoie pas plus différent.

RAM
la source
0

Si vous voulez des valeurs séparées pour les côtés et le haut en bas.

<table style="border-spacing: 5px 10px;">
obliviJohn
la source