web-dev-qa-db-fra.com

Le rembourrage de la table ne fonctionne pas

J'ai une table qui se trouve dans une div parent pleine de corps de texte et d'autres contenus. J'ai le CSS suivant qui ne semble pas fonctionner:

table {width:100%; padding: 0 50px 0 50px;}

Lorsque j'utilise des marges au lieu du rembourrage, cela fonctionne. Cependant, avec une largeur: 100%, l'utilisation des marges élimine le tout du div parent. Je suppose que je pourrais réduire la largeur ou spécifier une quantité exacte de pixels, mais le reste du site s'adapte à la taille de l'écran et j'aimerais que cela fonctionne aussi.

htmlcssmarginpaddingcss-tables
13
Hank

Il existe des propriétés spéciales liées aux tables. Celui que vous recherchez est border-spacing.

table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 50px;
}

Exemple: http://jsfiddle.net/feeela/fPuQ6/

MISE À JOUR: Après avoir joué avec mon propre violon, je dois admettre que je me suis trompé en disant que "une table n'a pas de rembourrage". Le rembourrage sur la table fonctionne correctement - au moins lorsqu'il est affiché dans Chrome et Opera (12). L'extrait suivant devrait vous plaire aussi:

table {
    width: 100%;
    padding: 0 50px 0 50px;
}

Voir la version mise à jour du violon: http://jsfiddle.net/feeela/fPuQ6/3/

Néanmoins, je me demande toujours pourquoi le rembourrage n'est pas ajouté à la largeur comme pour un élément avec display: block;.

Voir également:

20
feeela

La réponse précédente montre que css peut définir border- [direction] pour chaque direction séparément. Mais une solution css beaucoup plus simple qui reproduit l'ancien style table cellpadding="7" border="1" peut être le suivant. En CSS:

table { 
  border-collapse:collapse;
  width: 100%;
}
td {
  padding: 7px;
  border:1px solid;
}

Montré dans ce violon: http://jsfiddle.net/b5NW5/77

3
murspieg

Vous pouvez ajouter le remplissage des cellules dans la définition du tableau OR si vous souhaitez utiliser CSS, utilisez peut essayer ceci:

Si vous utilisez CSS:

<style type="text\css">
.table {
        width: 100%;        
        border-top:1px solid red;
        border-right:1px solid red;
        border-collapse:collapse;
    }
.table td {
    padding: 7px;
    border-bottom:1px solid red;
    border-left:1px solid red;
}
</style>

<table class="table">
    <tr><td>Cell1a</td><td>Cell1b</td><td>Cell1c</td></tr>
    <tr><td>Cell2a</td><td>Cell2b</td><td>Cell2c</td></tr>
    <tr><td>Cell3a</td><td>Cell3b</td><td>Cell3c</td></tr>
</table>


Si vous utilisez en ligne:

<table cellpadding="9" cellspacing="5" style="border-collapse:collapse;" border="1">
    <tr><td>Cell1a</td><td>Cell1b</td><td>Cell1c</td></tr>
    <tr><td>Cell2a</td><td>Cell2b</td><td>Cell2c</td></tr>
    <tr><td>Cell3a</td><td>Cell3b</td><td>Cell3c</td></tr>
</table>

Vous pouvez le voir en action ici: http://jsfiddle.net/b5NW5/1/

J'espère que cela aide

2
kheya

C'est la raison pourquoi;

De MDN , pour utiliser le remplissage dans les tableaux, vous devez avoir border-collapse: separate; afin de permettre l'utilisation de border-spacing car border-spacing est un facteur dans le calcul de la distance entre le bord extérieur de la table et le bord des cellules extérieures (voir les citations de MDN ci-dessous). Après cela, vous pouvez maintenant attribuer une valeur à padding. Vous pouvez également définir border-spacing: 0px; pour annuler l'ajout de border-spacing au rembourrage.

La propriété CSS border-spacing définit la distance entre les bordures des cellules adjacentes. Cette propriété s'applique uniquement lorsque border-collapse est séparé.

La valeur d'espacement de bordure est également utilisée le long du bord extérieur du tableau, où la distance entre la bordure du tableau et les cellules de la première/dernière colonne ou ligne est la somme de l'espacement de bordure (horizontal ou vertical) pertinent et de la rembourrage approprié (haut, droit, bas ou gauche) sur la table.

0
Ozichukwu