CSS: comment créer un espace entre les lignes d’une table?

Ce qui signifie que la table résultante ressemble moins à ceci:

 [=== ROW ===]
 [=== ROW ===]
 [=== ROW ===]
 [=== ROW ===]

… et plus comme ça:

 [=== ROW ===]

 [=== ROW ===]

 [=== ROW ===]

 [=== ROW ===]

J’ai essayé d’append

margin-bottom:1em; 

à la fois td et tr mais rien. Des idées?

 table { border-collapse: collapse; } td { padding-top: .5em; padding-bottom: .5em; } 

Les cellules ne réagiront à rien si vous ne définissez pas la bordure avant. Vous pouvez également append des bordures aux éléments TR une fois qu’il est défini (entre autres).

Si c’est pour la mise en page, je passerais à l’utilisation des DIV et à des techniques de mise en page plus récentes, mais s’il s’agit de données tabulaires, éliminez-vous. Je continue à utiliser des tables dans mes applications Web pour les données.

Tout ce dont tu as besoin:

 table { border-collapse: separate; border-spacing: 0 1em; } 

Cela suppose que vous souhaitiez un espace vertical 1em et aucun écart horizontal. Si vous faites cela, vous devriez probablement aussi contrôler votre hauteur de ligne.

Un peu bizarre que certaines des réponses apscopes par les gens impliquent un effondrement des frontières: l’effondrement, dont l’effet est exactement l’opposé de ce que la question demandait.

Si vous ne disposez pas de bordures ou de bordures et que vous souhaitez l’espacement à l’intérieur des cellules, vous pouvez utiliser le padding ou la line-height . Pour autant que je sache, la marge n’a aucun effet sur les cellules et les lignes.
Une propriété CSS pour l’espacement des cellules est l’espacement des border-spacing , mais elle ne fonctionne pas sur IE6 / 7 (vous pouvez donc l’utiliser selon votre foule).

Si tout le rest échoue, vous pouvez utiliser l’ancien atsortingbut cellspacing dans votre balisage – mais cela vous donnera également un espacement entre les colonnes. Certaines réinitialisations CSS suggèrent que vous deviez tout de même configurer la prise en charge inter-navigateur:

/ * tables ont toujours besoin de cellspacing="0" dans le balisage * /

Si aucune des autres réponses n’est satisfaisante, vous pouvez toujours créer une ligne vide et la classer de manière appropriée en CSS pour être transparente.

Vous pouvez simplement utiliser le padding-top et le padding-bottom sur un élément td .

L’unité peut quelque chose de cette liste-

entrer la description de l'image ici

Code de démonstration-

 td { padding-top: 10px; padding-bottom: 10px; } 
 
Firstname Lastname
Peter Griffin
Lois Griffin

À mon avis, le plus simple est d’append un remplissage à votre tag.

 td { padding: 10px 0 } 

J’espère que ceci vous aidera! Acclamation!

C’est comme ça (je pensais que c’était impossible):

D’abord, ne donnez à la table qu’un espacement vertical des bordures (par exemple 5px) et définissez son espacement horizontal à 0. Vous devez alors atsortingbuer des bordures appropriées à chaque cellule de ligne. Par exemple, la cellule la plus à droite de chaque ligne doit avoir une bordure en haut, en bas et à droite. Les cellules les plus à gauche doivent avoir une bordure en haut, en bas et à gauche. Et les autres cellules entre ces 2 ne devraient avoir que des bordures en haut et en bas. Comme cet exemple:

 
left-most cell other cell other cell other cell right-most cell
left-most cell other cell other cell other cell right-most cell
left-most cell other cell other cell other cell right-most cell

le remplissage dans le TD fonctionne si vous voulez que l’espace ait la même couleur de fond que le td

dans mon cas, l’exigence était un espace blanc entre la rangée d’en-tête et tout ce qui était au-dessus

en appliquant ce style à une seule cellule, j’ai pu obtenir la séparation souhaitée. Il n’était pas nécessaire de l’append à toutes les cellules … Sans doute pas la plus élégante, mais peut-être plus élégante que les lignes de séparation.

  
< %# Eval("VendorName")%>

Si vous vous en tenez à la conception en utilisant des tableaux, la meilleure idée est de donner une ligne vide sans contenu et une hauteur spécifiée entre chaque ligne de la table.

Vous pouvez utiliser div pour éviter cette complexité. Donne juste une marge à chaque div.

Vous pouvez également modifier la hauteur de chaque ligne à l’aide de CSS.

     
One Two
Three Four
Five Six

Vous pouvez également modifier la hauteur de l’élément

, cela devrait vous donner le même résultat.

Ajouter la règle suivante à tr et cela devrait fonctionner

 float: left 

Sample (Ouvrez-le dans IE9 offcourse :)): http://jsfiddle.net/zshmN/

EDIT: Ce n’est pas une solution légale ou correcte comme le soulignent beaucoup, mais si vous ne disposez d’aucune option et que vous avez besoin de quelque chose, cela fonctionnera dans IE9.

Donc, tous ceux qui donnent des votes, s’il vous plaît laissez-nous savoir la solution correcte aussi bien