Dev Faq
8
votes

Comment mettre un peu d'espace entre le pied de page de table / en-tête et le contenu du corps?

Je veux mettre un peu d'espace entre l'en-tête de la table HTML et le pied de page, et ma teneur en corps. Je ne le ferais que la marge et la marge. Pourtant, le poids de la police: audacieux; La directive est prise en compte.

Mon HTML: P> 

#myTbl {
    font-weight: normal;
}

#myTbl thead {
    font-weight: bold;
    margin-bottom: 10px;
}

#myTbl tfoot {
    font-weight: bold;
    margin-top: 10px;
}

2 commentaires

La marge ne s'applique pas à interne

éléments - w3.org/tr/css2/box.html#margin-properties

Dupliquer possible? Stackoverflow.com/questions/9258754/...

4 Réponses :

7
votes

-espacement de bordure code> propriété : 

#myTbl thead {
    display: table;
    width: 100%;
    margin-bottom: 10px;
}

#myTbl tfoot {
    display: table;
    width: 100%;
    margin-top: 10px;
}

3 commentaires

Votre solution ajoute un espacement entre toutes les cellules. C'est ce que je cherchais: Jsfiddle.net/nce3k/10

OK, mais quand il y a plusieurs colonnes, il ne fonctionne plus: Jsfiddle.net/nce3k/13

@ Jverstry, oui dans ce cas, il échoue. Mais notez que Padding est utile uniquement lorsque vous n'avez pas de arrière-plan ou bordure dans thead et Tfoot cellules.

8
votes

Essayez d'utiliser un rembourrage sur les éléments Th. xxx

http: // jsfiddle.net/nce3k/9/

0 commentaires
4
votes

Vous pouvez ajouter une ligne vide entre la tête et le corps / le corps et le pied de page - 

     ...</thead>
     <tr height="10px"></tr>
     <tbody>...

0 commentaires
8
votes

Voici ma solution: 

.common-table-body:before {
  line-height:1.5em;
  content:".";
  color:white;
  display:block;
}

0 commentaires

Articles qui pourrait vous intéresser :

Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO
Select2 ne s'affiche pas correctement dans le mode bootstrap
Le bootstrap de Twitter a-t-il des classes utilitaires de taille de police?
Comment puis-je définir un format pour les nombres d'entrée dans Blazor