CSS: comment créer un espace entre les lignes d'un tableau?

Cela 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'ajouter

margin-bottom:1em;

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

Tout ce dont tu as besoin:

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

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

C'est assez étrange que certaines des réponses que les gens ont données impliquent l'effondrement des frontières: l'effondrement, dont l'effet est exactement le contraire de ce que la question demandait.

table {
    border-collapse: collapse;
}

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

Les cellules ne réagiront à rien à moins que vous ne définissiez d'abord la réduction de la bordure. Vous pouvez également ajouter des bordures aux éléments TR une fois que cela est défini (entre autres).

Si c'est pour la mise en page, je passerais à l'utilisation de DIV et de techniques de mise en page plus à jour, mais s'il s'agit de données tabulaires, éliminez-vous. J'utilise encore beaucoup les tableaux dans mes applications Web pour les données.

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

Si vous n'avez pas de bordures ou si vous avez des bordures et que vous voulez l'espacement à l'intérieur des cellules, vous pouvez utiliser paddingou line-height. 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 border-spacing, mais elle ne fonctionne pas sur IE6 / 7 (vous pouvez donc l'utiliser en fonction de votre foule).

Si tout le reste échoue, vous pouvez utiliser l'ancien cellspacingattribut dans votre balisage - mais cela vous donnera également un espacement entre les colonnes. Certaines réinitialisations CSS suggèrent que vous devriez le configurer de toute façon pour obtenir une prise en charge de plusieurs navigateurs:

/ * les tables ont encore besoin cellspacing="0"dans le balisage * /

C'est comme ça (je pensais que c'est impossible):

Donnez d'abord au tableau uniquement l'espacement vertical des bordures (par exemple 5px) et définissez son espacement horizontal des bordures sur 0. Ensuite, vous devez donner 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 qu'une bordure en haut et en bas. Comme cet exemple:

<table style="border-spacing:0 5px; color:black">
    <tr>
        <td style="border-bottom:thin black solid; border-top:thin black solid; border-left:thin black solid;">left-most cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid; border-right:thin black solid;">right-most cell</td>
    </tr>
    <tr>
        <td style="border-bottom:thin black solid; border-top:thin black solid; border-left:thin black solid;">left-most cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid; border-right:thin black solid;">right-most cell</td>
    </tr>
    <tr>
        <td style="border-bottom:thin black solid; border-top:thin black solid; border-left:thin black solid;">left-most cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid; border-right:thin black solid;">right-most cell</td>
    </tr>
</table>

À mon avis, le moyen le plus simple de le faire est d'ajouter un remplissage à votre balise.

td {
 padding: 10px 0
}

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

Vous pouvez simplement utiliser padding-topet padding-bottomsur un tdélément.

L'unité peut tout de cette liste:

Code de démonstration:

td
{
  padding-top: 10px;
  padding-bottom: 10px;
}

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
  </tr>
</table>

le remplissage dans le TD fonctionne si vous voulez que l'espace ait la même couleur d'arrière-plan que le td

dans mon cas, l'exigence était d'espace blanc entre la ligne d'en-tête et tout ce qui se trouvait 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'ajouter à toutes les cellules ... Sans doute pas le PLUS élégant, mais peut-être plus élégant que les lignes de séparation.

<td colspan="10"> 
    <div class="HeaderRow" 
         style="margin-top:10px;">
            <%# Eval("VendorName")%>
     </div>
</td>  

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

Vous pouvez utiliser div pour éviter cette complexité. Donnez simplement une marge à chaque div.

Vous pouvez également simplement modifier la hauteur de chaque ligne en utilisant CSS.

<head>
 <style>
 tr {
   height:40px;
 }
</style>
</head>

<body>
<table>

<tr> <td>One</td> <td>Two</td> </tr>
<tr> <td>Three</td> <td>Four</td> </tr>
<tr> <td>Five</td> <td>Six</td> </tr>

</table>
</body>

Vous pouvez également modifier la hauteur de l' <td>élément, cela devrait vous donner le même résultat.

Créez-en un autre <tr>juste en dessous et ajoutez de l'espace ou de la hauteur au contenu de<td>

Découvrez le violon par exemple

https://jsfiddle.net/jd_dev777/wx63norf/9/

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

float: left

Exemple (ouvrez-le dans IE9 offcourse :)): http://jsfiddle.net/zshmN/

EDIT: Ce n'est pas une solution légale ou correcte comme l'ont souligné beaucoup, mais si vous n'avez aucune option et avez besoin de quelque chose, cela fonctionnera dans IE9.

Donc, tous ceux qui donnent des votes, veuillez nous indiquer également la solution correcte