Table de remplissage ne fonctionne pas

J'ai une table qui se trouve à l'intérieur d'un div parent plein de corps de texte et d'autre contenu. J'ai le code CSS suivant qui semble ne pas fonctionner:

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

Lorsque j'utilise les marges au lieu de rembourrage, il fonctionne, cependant, avec width:100%, en utilisant les marges de scoots l'ensemble de la div parent. Je suppose que je pourrais réduire la largeur ou de spécifier une exacte montant en pixels, mais le reste du site échelles avec la taille de l'écran et j'aimerais que cela fonctionne comme ça aussi.

Vous pouvez définir la marge de et largeur de la table de pourcentages.
double possible: stackoverflow.com/questions/1750670/...

OriginalL'auteur Hank | 2014-02-18

  1. 14

    Il y a quelques propriétés particulières liées à des tables. La personne que vous cherchez 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 violon, je dois avouer que je me suis trompé en disant que "un tableau n'ont pas de rembourrage". Le rembourrage sur la table fonctionne bien – au moins lors de l'affichage dans google Chrome et Opera (12). L'extrait de code suivant devrait faire ce que vous voulez faire trop:

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

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

    Néanmoins, je suis toujours demander pourquoi le rembourrage n'est pas ajoutée à la largeur d'un élément avec display: block;.

    Voir aussi:

    OriginalL'auteur feeela

  2. 3

    L'état de la réponse montre que le css permet de définir la frontière-[direction] pour ea direction séparément. Mais beaucoup plus simple css seule solution qui réplique l'ancien style table cellpadding="7" border="1" peut être la suivante. Dans le CSS: 

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

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

    OriginalL'auteur murspieg

  3. 2

    Vous pouvez ajouter la marge intérieure des cellules dans la définition de la table OU si vous souhaitez utiliser le CSS, alors utilisez pouvez essayer ceci:

    Si à l'aide de 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 l'aide 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/

    Espère que cela aide

    OriginalL'auteur kheya