web-dev-qa-db-fra.com

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?

htmlcss
79
MGOwen
table {
    border-collapse: collapse;
}

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

Les cellules ne réagissent à rien sauf si vous définissez d'abord le bord de la fenêtre. Vous pouvez également ajouter des bordures aux éléments TR une fois que cela est défini (entre autres).

S'il s'agit d'une mise en page, je passerais à l'utilisation de DIV et de techniques de mise en page plus récentes, mais s'il s'agit de données tabulaires, supprimez-vous. J'utilise toujours beaucoup les tableaux dans mes applications Web pour les données.

86
Ryan Florence

Tout ce dont tu as besoin:

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

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

C'est un peu étrange que certaines des réponses données impliquent un effondrement de la frontière: effondrement, dont l'effet est exactement le contraire de ce que la question demandait.

175
John Haugeland

Si aucune des autres réponses ne donne satisfaction, vous pouvez toujours créez simplement une ligne vide et appelez-la avec CSS de manière appropriée pour la rendre transparente.

4
Flimm

Si vous n'avez pas de bordure ou si vous souhaitez conserver 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 (vous pouvez donc l’utiliser en fonction de votre foule). 

Si tout é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 deviez quand même le configurer pour obtenir une prise en charge multi-navigateurs:

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

4
Kobi

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

Commencez par donner à la table uniquement un espacement vertical des bordures (par exemple 5px) et définissez-le sur 0. Vous devez ensuite définir des bordures appropriées pour chaque cellule de la rangée. 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 de 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>
1
Arash Esmaeili

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

Unité peut rien dans cette liste:

 enter image description here

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>

1
Abrar Jahin

À mon avis, le moyen le plus simple consiste à ajouter du rembourrage à votre tag.

td {
 padding: 10px 0
}

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

1
Huy Le

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

dans mon cas, l'exigence était de laisser un espace entre la rangée 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>
0
greg