Des marges gauche et droite sur une ligne du tableau

Comment puis-je définir la marge de gauche et droite d'une ligne de tableau (ou quelque chose de similaire pour obtenir le même résultat)? J'ai essayé border-collapse:separate; border-spacing:20px; mais qui a supprimé les lignes de bordure en bas.

C'est ce que je suis en train de créer:

Des marges gauche et droite sur une ligne du tableau

InformationsquelleAutor Awd Er | 2011-07-13
  1. 1

    Je ne pense pas que ce soit possible avec des tables.

    Ici, il est avec les divs et les travées. J'espère que vous l'aimez:

    <html>
 <head>
  <style>
   div#outer {
    border: 10px solid black;
    width: 30em;
   }
   div#header {
    background-color: red;
    color: white;
    text-align: center;
   }
   div.row {
    border-bottom: 1px dashed red;
    margin: 10px 20px;
    clear: both;
   }
   span.left {
    float: left;
   }
   span.right {
    margin-left: 10em;
   }
  </style>
</head>
 <body>
  <div id="outer">
  <div id="header">Some table head text</div>
   <div class="row">
    <span class="left">Col</span>
    <span class="right">Col</span>
   </div>
   <div class="row">
    <span class="left">Col</span>
    <span class="right">Col</span>
   </div>
   <div class="row">
    <span class="left">Col</span>
    <span class="right">Col</span>
   </div>
  </div>
 </body>
</html>
    • Mais alors la bordure inférieure vais quand même y aller tout le chemin à partir de la gauche vers la droite.
    • Wow c'était vraiment difficile avec des tables, peut-être impossible en raison de la façon dont trs étendre à remplir leur contenant des tableaux. Cependant j'ai mis en place une page qui utilise des divs et s'étend. Espérons que cela fonctionne pour vous.
    • Grâce Ray! Pense que je vais aller pour cette solution.
    • Il est possible, avec des tables à l'aide colspan dans la ligne d'en-tête, et des colonnes vides dans le corps de table.
    • Oui c'est vrai, mais cette pratique est mal vu car il utilise des tables pour la mise en forme. La première et dernière colonnes de vide et de la frontière-bas, juste pour le milieu de la td donne le droit de regarder, mais horriblement viole la séparation du contenu (HTML) et la présentation (CSS). Je ne pouvais pas le faire en toute bonne conscience! 😉 Ou peut-être que vous pensiez à autre chose?
    InformationsquelleAutor Ray Toal
  2. 2

    ajouter une classe à la table, puis ajouter le remplissage à gauche et à droite.

    table class="certains" table

    .quelques-table {
    padding-left:10px;
    padding-right:10px;
    }

    devrait fonctionner.

    Si elle ne marche pas, puis ajouter une classe à gauche et à fixer la marge de gauche et de droite col à la place.

    • Si j'ai un rembourrage sur la table de l'en-tête ne serait pas 100% de largeur (regardez l'image). Si j'ai mis le rembourrage sur la gauche et la droite td de la frontière-bas serait encore d'aller tout le chemin à partir de la gauche vers la droite.
    • comment cela, assez proche? junk.hostsaba.com/table.html
    • juste pour référence, voici le tableau avec la distance à la bordure du bas. junk.hostsaba.com/table2.html
    InformationsquelleAutor ussher