Comment spécifiez-vous le remplissage du tableau en CSS? (tableau, pas de rembourrage cellulaire)

Question

J'ai une table avec un arrière-plan coloré et j'ai besoin de spécifier l'espacement entre la table et son contenu, I. E. les cellules.
La balise table ne semble pas accepter une valeur de remplissage.
Firebug affiche la table et tbody de la mise en page avec rembourrage en 0 mais n'est pas accepter n'importe quelle valeur entrée pour eux, donc je suppose qu'ils n'ont tout simplement pas la propriété padding.
Mais le truc, c'est que je veux la même séparation entre les cellules que les cellules avec le dessus de la table et le fond des cellules avec le tableau du bas.
Encore une fois, ce que je veux, c'est pas de cellule de rembourrage.

EDIT: Merci, ce que j'ai vraiment besoin, je me rends compte maintenant, a la frontière de l'espacement, ou son équivalent html, cellspacing.
Mais pour une raison quelconque, ils ne font rien dans le site que je suis en train de travailler sur.
Les deux fonctionnent très bien sur HTML séparé, mais sur le site ils n'en ont pas.
J'ai pensé qu'il pourrait être un certain style de l'écrasement de la propriété, mais cellspacing et une ligne frontière de l'espacement ne doit pas être écrasé, droit?
(J'utilise firefox )

EDIT 2: Non, TD rembourrage n'est PAS ce dont j'ai besoin. Avec le TD de rembourrage, en haut et en bas des remplissages de cellules adjacentes résumer, donc, il y a le double de l'espace (pad en fait) entre deux cellules qu'entre la cellule d'en haut et le dessus de la table de la frontière. Je veux avoir exactement la même distance entre eux.

Answer 1

La méthode la plus simple / la mieux prise en charge consiste à utiliser <table cellspacing="10">

La manière css: border-spacing (non pris en charge par IE, je ne pense pas)

 <!-- works in firefox, opera, safari, chrome -->
<style type="text/css">

table.foobar {
    border: solid black 1px;
    border-spacing: 10px;
}
table.foobar td {
    border: solid black 1px;
}


</style>

<table class="foobar" cellpadding="0" cellspacing="0">
<tr><td>foo</td><td>bar</td></tr>
</table>
 

Modifier: si vous souhaitez simplement remplir le contenu de la cellule, et non les espacer, vous pouvez simplement utiliser

 <table cellpadding="10">
 

OU

 td {
    padding: 10px;
}
 

Answer 2

Vous pouvez définir une marge pour le tableau. Alternativement, enveloppez le tableau dans un div et utilisez le rembourrage du div.

Answer 3

Voici la chose que vous devez comprendre au sujet de tables... Ils ne sont pas un arbre d'imbrication des éléments indépendants. Ils sont un composé unique élément. Alors que les TDs se comportent plus ou moins comme le CSS des éléments de bloc, l'intermédiaire des trucs (rien entre la TABLE et la TD, y compris les TRs et TBODYs) est indivisible et ne pas tomber dans inline , ni bloquer. Pas de hasard éléments HTML sont autorisés dans d'autres dimensions de l'espace, et la taille de ces autres dimensions de l'espace n'est pas configurable à tous grâce à CSS. Seulement le code HTML cellspacing propriété peut même obtenir à elle, et que la propriété n'a pas d'analogue dans la CSS.

Donc, pour résoudre votre problème, je vous suggère soit une DIV wrapper comme une autre affiche suggère, ou si vous devez absolument le garder dans le tableau, vous avez ce vilain indésirable:

<style>
    .padded tr.first td { padding-top:10px; }
    .padded tr.last td { padding-bottom:10px; }
    .padded td.first { padding-left:10px; }
    .padded td.last { padding-right:10px; }
</style>

<table class='padded'>
    <tr class='first'>
        <td class='first'>a</td><td>b</td><td class='last'>c</td>
    </tr>
    <tr>
        <td class='first'>d</td><td>e</td><td class='last'>f</td>
    </tr>
    <tr class='last'>
        <td class='first'>g</td><td>h</td><td class='last'>i</td>
    </tr>
</table>

Answer 4

Vous ne pouvez pas ... Peut-être que si vous avez publié une photo de l'effet souhaité, il y a une autre façon de l'atteindre.

Par exemple, vous pouvez envelopper la table entière dans un DIV et définir le remplissage sur le div.

Answer 5

Drôle, je faisais justement ça hier. Vous en avez juste besoin dans votre fichier css

 .ablock table td {
     padding:5px;
}
 

puis enveloppez la table dans un div approprié

 <div class="ablock ">
<table>
  <tr>
    <td>