Comment spécifiez-vous le remplissage de table dans CSS? (table, pas de marge intérieure des cellules)
j'ai une table avec un fond coloré et j'ai besoin de spécifier le rembourrage entre la table et son contenu, c'est-à-dire des cellules.
La balise table ne semble pas accepter une valeur de remplissage.
Firebug montre la table et la disposition du corps avec le rembourrage 0 mais n'accepte aucune valeur entrée pour eux, donc je suppose qu'ils n'ont tout simplement pas la propriété de rembourrage.
Mais la chose est que je veux la même séparation entre les cellules que le cellules supérieures avec le haut de la table et cellules inférieures avec le bas de la table.
Encore une fois, ce que je veux, ce n'est pas de la Cell-padding.
EDIT: Merci, ce dont j'avais vraiment besoin, je le réalise maintenant, c'était de l'espacement des frontières, ou son équivalent html, cellspacing.
Mais pour une raison quelconque, ils ne font rien sur le site sur lequel je travaille.
Les deux fonctionnent bien sur un HTML séparé, mais dans le site ils ne le font pas.
Je j'ai pensé que ça pourrait être un style qui écrirait la propriété, mais l'espace de cellules et un interligne de bord ne devraient pas être écrasés, pas vrai?
(J'utilise firefox )
EDIT 2: Non, TD rembourrage n'est PAS ce dont j'ai besoin. Avec le padding TD, Les paddings supérieurs et inférieurs des cellules adjacentes se résument, donc il y a deux fois plus d'espace (pad en fait) entre deux cellules qu'entre la cellule supérieure et le bord supérieur de la table. Je veux avoir exactement la même distance entre eux.
11 réponses
la méthode la plus facile/la mieux supportée est d'utiliser <table cellspacing="10">
Le 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>Edit: si vous voulez simplement tamponner le contenu de la cellule, et non les espacer, vous pouvez simplement utiliser
<table cellpadding="10">
ou
td {
padding: 10px;
}
, Vous pouvez définir une marge pour la table. Alternativement, envelopper la table dans un div et utiliser le rembourrage du div.
voici ce que vous devez comprendre à propos des tables... Ce n'est pas un arbre d'éléments indépendants imbriqués. Ils sont un composé unique élément. Alors que les TDs individuels se comportent plus ou moins comme des éléments de bloc CSS, les éléments intermédiaires (n'importe quoi entre la TABLE et TD, y compris le TRs et le TBODYs) sont indivisibles et ne tombent pas dans inline ni block . Aucun élément HTML aléatoire n'est autorisé dans cet espace autre que dimensionnel, et la taille d'un tel espace à d'autres dimensions n'est pas configurable du tout par CSS. Seule la propriété HTML cellspacing peut y accéder, et cette propriété n'a pas d'analogique dans CSS.
donc, pour résoudre votre problème, je suggérerais soit un div wrapper comme un autre poster suggère, ou si vous devez absolument le garder contenu dans la table, vous avez cette vilaine Camelote:
<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>
drôle, je faisais exactement cela hier. Vous avez juste besoin de cela dans votre fichier css
.ablock table td {
padding:5px;
}
puis envelopper la table dans un div approprié
<div class="ablock ">
<table>
<tr>
<td>
vous ne pouvez pas... Peut-être que si vous avez posté une image de l'effet désiré, il y a une autre façon de l'obtenir.
par exemple, vous pouvez envelopper la table entière dans une DIV et mettre le rembourrage à la div.
avec css, une table peut être rembourrée indépendamment de ses cellules.
la propriété de rembourrage n'est pas héritée par ses enfants.
ainsi, définissant:
table {
padding: 5px;
}
devrait marcher. Vous pouvez également dire spécifiquement au navigateur comment pad (ou dans ce cas, pas pad) vos cellules.
td {
padding: 0px;
}
EDIT: Non pris en charge par IE8. Désolé.
vous pouvez essayer la propriété border-spacing. Que devrait faire ce que vous voulez. Mais vous pouvez vouloir voir ce réponse .
CSS ne vous permet pas vraiment de faire cela au niveau d'une table. Généralement, je spécifie cellspacing="3" quand je veux atteindre cet effet. Évidemment pas une solution css, donc prenez-le pour ce qu'il vaut.
il y a un autre truc:
/* Padding on the sides of the table */
table th:first-child, .list td:first-child { padding-left: 28px; }
table th:last-child, .list td:last-child { padding-right: 28px; }
(je viens de le voir à mon emploi actuel)
table {
border: 1px solid transparent;
}
table {
background: #fff;
box-shadow: 0 0 0 10px #fff;
margin: 10px;
width: calc(100% - 20px);
}