web-dev-qa-db-fra.com

Comment spécifiez-vous le remplissage de la table en CSS? (table, pas de remplissage de cellule)

J'ai une table avec un arrière-plan coloré et je dois spécifier le remplissage entre la table et son contenu, I.E. cellules.
La balise table ne semble pas accepter une valeur de remplissage.
Firebug montre la disposition de la table et de tbody avec le padding 0 mais n'accepte aucune valeur entrée pour eux, donc je suppose qu'ils n'ont tout simplement pas la propriété de padding.
Mais le fait est que je veux la même séparation entre les cellules que les cellules du haut avec le haut et les cellules du bas avec le bas du tableau.
Encore une fois, ce que je veux, ce n’est pas un remplissage de cellules.

EDIT: Merci, ce dont j’avais vraiment besoin, je me rends compte maintenant, c’est l’espacement des frontières, ou son équivalent html, cellulepacing.
Mais pour une raison quelconque, ils ne font rien dans le site sur lequel je travaille.
Les deux fonctionnent très bien sur un code HTML distinct, mais pas sur le site.
Je pensais que le style pourrait remplacer la propriété, mais le espacement des cellules et un espacement de bordure en ligne ne devraient pas être écrasés, n'est-ce pas?
(J'utilise firefox)

EDIT 2: Non, TD le remplissage n'est PAS ce dont j'ai besoin. Avec TD, les bourrages supérieurs et inférieurs des cellules adjacentes se résument. Il y a donc un double espace (le pavé en réalité) entre deux cellules plutôt qu'entre la cellule supérieure et le bord supérieur du tableau. Je veux avoir exactement la même distance entre eux.

htmlcsscellpaddingtablelayout
52
Petruza

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

La manière css: border-spacing (non supporté 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>

Éditer: si vous voulez juste remplir le contenu de la cellule, et non les espacer, vous pouvez simplement utiliser

<table cellpadding="10">

OR

td {
    padding: 10px;
}
39
Rob

Vous pouvez définir une marge pour la table. Vous pouvez également envelopper la table dans une div et utiliser le remplissage de la div.

24
Frank Schwieterman

Voici ce que vous devez comprendre à propos des tables ... Ce ne sont pas des arbres d'éléments indépendants imbriqués. Ils sont un élément composé unique. Tandis que les TD individuels se comportent plus ou moins comme des éléments de bloc CSS, les éléments intermédiaires (tout ce qui se situe entre TABLE et TD, y compris les TR et les TBODY) sont indivisibles et ne tombent ni dans inline ni block. Aucun élément HTML aléatoire n'est autorisé dans cet espace d'une autre dimension, et la taille de cet espace n'est pas configurable du tout via CSS. Seule la propriété HTML cellspacing peut même y accéder, et cette propriété n'a pas d'analogue en CSS.

Donc, pour résoudre votre problème, je suggérerais soit une enveloppe DIV, comme le suggère une autre affiche, soit, si vous devez absolument la conserver dans le tableau, vous avez cette vilaine ordure:

<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>
21
jpsimons

Vous ne pouvez pas ... Peut-être que si vous publiez une photo de l'effet souhaité, il existe un autre moyen de l'obtenir.

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

5
Seb

C'est drôle, je le faisais justement 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>
5
Cruachan

Avec css, une table peut avoir un rembourrage indépendamment de ses cellules.

La propriété padding n'est pas héritée par ses enfants.

Donc, définissant:

table {
    padding: 5px;
}

Devrait marcher. Vous pouvez également indiquer spécifiquement au navigateur comment tamponner (ou dans ce cas, pas tamponner) vos cellules.

td {
    padding: 0px;
}

EDIT: Non supporté par IE8. Pardon.

2
MPelletier

Vous pouvez essayer la propriété border-spacing. Cela devrait faire ce que vous voulez. Mais vous voudrez peut-être voir ceci répondre .

1
Vincent Ramdhanie

Il y a une autre astuce:

/* 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 travail actuel)

1
Offirmo

CSS ne vous permet pas vraiment de faire cela au niveau de la table. En général, je spécifie cellspacing="3" lorsque je souhaite obtenir cet effet. De toute évidence pas une solution CSS, alors prenez-le pour ce qu'il vaut.

1
localshred
table {
    border: 1px solid transparent;
}
0
Anibal Enrique Alvarez Sifonte
table {
    background: #fff;
    box-shadow: 0 0 0 10px #fff;
    margin: 10px;
    width: calc(100% - 20px); 
}
0
Rufina