web-dev-qa-db-fra.com

Impossible de placer une marge sur la balise <td> sans l'attribut CSS ou cellspacing

Pour une raison quelconque, je n'ai pas pu obtenir de cellules de tableau pour avoir une marge entre elles. Je veux que les cellules du tableau aient une couleur d'arrière-plan grise (sur un arrière-plan de page blanc) afin qu'elles ressemblent à des tuiles avec du blanc entre elles.

J'ai essayé dans le HTML,

<table cellspacing="3">

Toujours dans le CSS,

table td {
    margin:3px;
}

Rien ne fonctionne. Les cellules sont toujours collées ensemble, comme une grosse goutte grise. Suis-je en train de manquer quelque chose de très très basique?

Voici le code réel:

<table width="100%" cellspacing="3">
    <tr>
        <th>Document Number</th>
        <th>BP Reference No.</th>
        <th>Posting Date</th>
        <th>Posting Week</th>
        <th>Customer/Vendor Code</th>
        <th>Customer/Vendor Name</th>
        <th>Item No.</th>
        <th>Item/Service Description</th>
        <th>Item Group</th>
        <th>Warehouse Code</th>
        <th>Remaining Open Quantity</th>
        <th>Line No.</th>
        <th>Sales Employee Name</th>
        <th>Stock</th>
        <th>Fill Rate</th>
        <th>1046</th>
        <th>1047</th>
        <th>1048</th>
        <th>1049</th>
        <th>1050</th>
        <th>1051</th>
        <th>1052</th>
        <th>1053</th>
        <th>1054</th>
        <th></th>
    </tr>
    <tr>
        <td>17272</td>
        <td>2244100</td>
        <td>5/24/2010</td>
        <td>22</td>
        <td>NYST</td>
        <td>NYSTROM INC.</td>
        <td>NYM118SX26DSTKS01</td>
        <td>Nystrom, Mort. 1-1/8'', Schl C~K, US26D, ST cam, 5pin, KS #43758</td>
        <td>Mort Cylinders</td>
        <td>US1</td>
        <td>1000</td>
        <td>3</td>
        <td>KRE Management 1</td>
        <td>0</td>
        <td>100</td>
        <td>1000</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td></td>
    </tr>
</table>
htmlcsshtml-tablemargincellspacing
31
jeffkee

Si quelqu'un a toujours ce problème, essayez ceci dans votre feuille de style CSS:

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

Les valeurs d'espacement des bordures sont deux mesures de longueur. La valeur horizontale vient en premier et s'applique entre les colonnes. La deuxième mesure est appliquée entre les lignes.

Si vous fournissez une valeur, elle sera utilisée à la fois horizontalement et verticalement. Le paramètre par défaut est 0, ce qui fait doubler les bordures sur la grille intérieure du tableau.

83
sebastian

Si vous utilisez une réinitialisation CSS au début de votre feuille de style, vérifiez si elle contient le code suivant.

table {
  border-collapse: collapse;
}

Si tel est le cas, essayez de le remplacer par:

border-collapse: separate;
7
Sam Nabi

faire le style td avec le bloc. Essaye ça,

<table width="100%" border="0" cellpadding="2" cellspacing="1">
  <tbody>
    <tr>
      <td class="SlateGridDataError">Please Re-enter login information</td>
    </tr>
  </tbody>
</table>

.SlateGridDataError {
    border-radius: 2px;
    display: block;
    font-size: 14px;
    color: #999999;
    display:block;
    border: 1px solid #dd3c39;
    border-left: 5px solid #dd3c39;
    padding: 12px 5px;
    margin-bottom: 20px;
    cursor: default;
    outline: none;
}
4
Falah

Je pense que cellspacing prend la même couleur que la couleur d'arrière-plan du tableau.
Vous avez donc deux options:
1. Appliquez la couleur d'arrière-plan aux tds plutôt qu'aux <table> lui-même.
2. Vous pouvez utiliser une bordure blanche (border pour <td> avec un border-collapse: collapse pour le tableau)

0
Nivas

Essayez d'ajouter un td entre les deux TDs dont vous voulez avoir la marge. Définissez-le pour qu'il n'ait pas d'arrière-plan (ne mettez simplement pas "arrière-plan: quelque chose;") et pour avoir la largeur souhaitée. Si vous voulez mettre une marge entre deux TR, ajoutez simplement un autre tr entre eux et mettez un td avec la hauteur que vous voulez que la marge ait. Vous pouvez même utiliser la même classe pour les TD et définir le CSS une seule fois.

0
Breno