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

Tout ce dont vous avez besoin:

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

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

Un peu bizarre que certaines des réponses que les gens ont données impliquent border-collapse: collapse, dont l'effet est exactement le contraire de ce que la question a demandé.

Si vous n'avez pas de frontières, ou ont des frontières et de vouloir l'espacement à l'intérieur des cellules, vous pouvez utiliser padding, ou 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 border-spacing, mais cela ne fonctionne pas sur IE6 / 7 (donc vous pouvez l'utiliser en fonction de votre foule).

Si tout le reste échoue, vous pouvez utiliser l'ancien attribut cellspacing dans votre balisage-mais cela vous donnera également un espacement entre les colonnes. Certains CSS reset suggèrent que vous devriez réglez-le de toute façon pour obtenir un support multi-navigateur:

/ * les 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 styliser avec CSS de manière appropriée pour être transparente.

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

Unité peut quelque chose 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>

À mon avis, la façon la plus simple de faire est d'ajouter un remplissage à votre balise.

td {
 padding: 10px 0
}

Espérons que cela vous aidera! Encourager!

C'est le chemin (je pensais que c'est impossible):

Donnez D'abord à la table uniquement un espacement vertical (par exemple 5px) et définissez son espacement horizontal sur 0. Ensuite, vous devez donner des bordures appropriées à chaque cellule de ligne. Par exemple, la cellule la plus à droite de chaque ligne devrait avoir une bordure en haut, en bas et à droite. Les cellules les plus à gauche devraient avoir une bordure en haut, en bas et à gauche. Et les autres cellules entre ces 2 devraient seulement avoir 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>

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 pour l'espace blanc entre la ligne 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 désiré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 tables, la meilleure idée sera 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é. Il suffit de donner une marge à chaque div.

Vous pouvez également 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'élément <td>, cela devrait vous donner le même résultat.

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

float: left

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

EDIT: ce n'est pas une solution légale ou correcte comme indiqué par 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 faire savoir la solution correcte aussi