Espace entre deux rangées dans un tableau?

Est-ce possible via CSS?

j'essaie

tr.classname {
  border-spacing: 5em;
}

en vain. Peut-être que je fais quelque chose de mal?

Vous devez utiliser un rembourrage sur vos tdéléments. Quelque chose comme ça devrait faire l'affaire. Vous pouvez bien sûr obtenir le même résultat en utilisant un rembourrage supérieur au lieu d'un rembourrage inférieur.

Dans le code CSS ci-dessous, le signe supérieur à signifie que le remplissage n'est appliqué qu'aux tdéléments qui sont des enfants directs vers les tréléments de la classe spaceUnder. Cela permettra d'utiliser des tables imbriquées. (Cellules C et D dans l'exemple de code.) Je ne suis pas trop sûr de la prise en charge du navigateur pour le sélecteur d'enfant direct (pensez à IE 6), mais cela ne devrait pas casser le code dans les navigateurs modernes.

/* Apply padding to td elements that are direct children of the tr elements with class spaceUnder. */

tr.spaceUnder>td {
  padding-bottom: 1em;
}

<table>
  <tbody>
    <tr>
      <td>A</td>
      <td>B</td>
    </tr>
    <tr class="spaceUnder">
      <td>C</td>
      <td>D</td>
    </tr>
    <tr>
      <td>E</td>
      <td>F</td>
    </tr>
  </tbody>
</table>

Cela devrait ressembler à ceci:

+---+---+
| A | B |
+---+---+
| C | D |
|   |   |
+---+---+
| E | F |
+---+---+

Dans la table parent, essayez de définir

border-collapse:separate; 
border-spacing:5em;

Plus une déclaration de frontière, et voyez si cela atteint l'effet souhaité. Attention, cependant, IE ne prend pas en charge le modèle des "frontières séparées".

Vous avez une table avec des albums d'identification avec toutes les données ... J'ai omis les trés et les tds

<table id="albums" cellspacing="0">       
</table>

Dans le CSS:

table#albums 
{
    border-collapse:separate;
    border-spacing:0 5px;
}

puisque j'ai une image d'arrière-plan derrière la table, la simuler avec un rembourrage blanc ne fonctionnerait pas. J'ai choisi de mettre une ligne vide entre chaque ligne de contenu:

<tr class="spacer"><td></td></tr>

puis utilisez css pour donner aux lignes d'espacement une certaine hauteur et un fond transparent.

De Mozilla Developer Network :

La propriété CSS border-spacing spécifie la distance entre les bordures des cellules adjacentes (uniquement pour le modèle de bordures séparées). Cela équivaut à l'attribut cellspacing dans le HTML de présentation, mais une deuxième valeur facultative peut être utilisée pour définir différents espacements horizontal et vertical.

Cette dernière partie est souvent supervisée. Exemple:

.your-table {
    border-collapse: separate; /* allow spacing between cell borders */
    border-spacing: 0 5px; /* NOTE: syntax is <horizontal value> <vertical value> */

MISE À JOUR

Je comprends maintenant que l'OP souhaite que les lignes spécifiques et séparées aient un espacement accru. J'ai ajouté une configuration avec des tbodyéléments qui accomplit cela sans ruiner la sémantique. Cependant, je ne sais pas s'il est pris en charge sur tous les navigateurs. Je l'ai fait dans Chrome.

L'exemple ci-dessous est pour montrer comment vous pouvez le faire ressembler à la table existe de lignes séparées, pleine douceur CSS CSS. A également donné plus d'espacement à la première rangée avec la tbodyconfiguration. N'hésitez pas à utiliser!

Avis de support: IE8 +, Chrome, Firefox, Safari, Opera 4+

.spacing-table {
  font-family: 'Helvetica', 'Arial', sans-serif;
  font-size: 15px;
  border-collapse: separate;
  table-layout: fixed;
  width: 80%;
  border-spacing: 0 5px; /* this is the ultimate fix */
}
.spacing-table th {
  text-align: left;
  padding: 5px 15px;
}
.spacing-table td {
  border-width: 3px 0;
  width: 50%;
  border-color: darkred;
  border-style: solid;
  background-color: red;
  color: white;
  padding: 5px 15px;
}
.spacing-table td:first-child {
  border-left-width: 3px;
  border-radius: 5px 0 0 5px;
}
.spacing-table td:last-child {
  border-right-width: 3px;
  border-radius: 0 5px 5px 0;
}
.spacing-table thead {
  display: table;
  table-layout: fixed;
  width: 100%;
}
.spacing-table tbody {
  display: table;
  table-layout: fixed;
  width: 100%;
  border-spacing: 0 10px;
}

<table class="spacing-table">
  <thead>
    <tr>
        <th>Lead singer</th>
        <th>Band</th>
    </tr>
  </thead>
  <tbody>
    <tr>
        <td>Bono</td>
        <td>U2</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
        <td>Chris Martin</td>
        <td>Coldplay</td>
    </tr>
    <tr>
        <td>Mick Jagger</td>
        <td>Rolling Stones</td>
    </tr>
    <tr>
        <td>John Lennon</td>
        <td>The Beatles</td>
    </tr>
  </tbody>
</table>

Vous pouvez essayer d'ajouter une ligne de séparation:

html:

<tr class="separator" />

css:

table tr.separator { height: 10px; }

Vous ne pouvez pas modifier la marge d'une cellule de tableau. Mais vous POUVEZ changer le rembourrage. Modifiez le remplissage du TD, ce qui agrandira la cellule et éloignera le texte du côté avec le remplissage accru. Si vous avez des frontières, cependant, ce ne sera pas exactement ce que vous voulez.

Jetez un œil à l' attribut border-collapse: distinct (par défaut) et à la propriété border-spacing .

Tout d'abord, vous devez les séparer avec border-collapse , puis vous pouvez définir l' espace entre les colonnes et les lignes avec border-spacing .

Ces deux propriétés CSS sont en fait bien prises en charge sur tous les navigateurs, voir ici .

table     {border-collapse: separate;  border-spacing: 10px 20px;}

table, 
table td,
table th  {border: 1px solid black;}

<table>
  <tr>
    <td>Some text - 1</td>
    <td>Some text - 1</td>
  </tr>
  <tr>
    <td>Some text - 2</td>
    <td>Some text - 2</td>
  </tr>
  <tr>
    <td>Some text - 3</td>
    <td>Some text - 3</td>
  </tr>
</table>

Ok, tu peux faire

tr.classname td {background-color:red; border-bottom: 5em solid white}

Assurez-vous que la couleur d'arrière-plan est définie sur le td plutôt que sur la ligne. Cela devrait fonctionner sur la plupart des navigateurs ... (Chrome, c'est-à-dire testé & ff)

Vous devez vous mettre border-collapse: separate;sur la table; la plupart des feuilles de style par défaut du navigateur commencent à border-collapse: collapse;, ce qui réduit l'espacement des bordures.

En outre, l'espacement des frontières: va sur le TD, pas le TR.

Essayer:

<html><head><style type="text/css">
    #ex    { border-collapse: separate; }
    #ex td { border-spacing: 1em; }
</style></head><body>
    <table id="ex"><tr><td>A</td><td>B</td></tr><tr><td>C</td><td>D</td></tr></table>
</body>

Vous pouvez utiliser la hauteur de ligne dans le tableau:

<table style="width: 400px; line-height:50px;">

tr { 
    display: block;
    margin-bottom: 5px;
}

Une réponse trop tardive :)

Si vous appliquez un flottant aux tréléments, vous pouvez espacer entre deux lignes avec un marginattribut.

table tr{
float: left
width: 100%;
}

tr.classname {
margin-bottom:5px;
}

Pour créer une illusion d'espacement entre les lignes, appliquez la couleur d'arrière-plan à la ligne, puis créez une bordure épaisse avec une couleur blanche afin qu'un "espace" soit créé :)

tr 
{
   background-color: #FFD700;
   border: 10px solid white;
}

La bonne façon de donner un espacement aux tableaux est d'utiliser le rembourrage cellulaire et l'espacement des cellules, par exemple

<table cellpadding="4">

Je suis tombé sur cela tout en luttant avec un problème similaire. J'ai trouvé la réponse de Varun Natraaj très utile, mais j'utiliserais plutôt une bordure transparente.

td { border: 1em solid transparent; }

Les bordures transparentes ont toujours de la largeur.

Fonctionne pour la plupart des derniers navigateurs en 2015. Solution simple. Cela ne fonctionne pas pour le transparent, mais contrairement à la réponse de Thoronwen, je ne peux pas être transparent pour le rendu avec n'importe quelle taille.

    tr {
      border-bottom:5em solid white;
    }

Mettez simplement divà l'intérieur de tdet définissez les styles suivants div:

margin-bottom: 20px;
height: 40px;
float: left;
width: 100%;

Je me rends compte que c'est une réponse à un vieux fil et peut ne pas être la solution demandée, mais bien que toutes les solutions suggérées n'aient pas fait ce dont j'avais besoin, cette solution a fonctionné pour moi.

J'avais 2 cellules de tableau, l'une avec une couleur d'arrière-plan, l'autre avec une couleur de bordure. Les solutions ci-dessus suppriment la frontière, de sorte que la cellule de droite semble flotter dans les airs. La solution qui a fait l'affaire était de remplacer le table, tret tdpar les divs et les classes correspondantes: la table serait div id="table_replacer", tr serait div class="tr_replacer"et td serait div class="td_replacer"(changer les balises fermantes en divs aussi bien évidemment)

Pour obtenir la solution à mon problème, le CSS est:

#table_replacer{display:table;}
.tr_replacer {border: 1px solid #123456;margin-bottom: 5px;}/*DO NOT USE display:table-row! It will destroy the border and the margin*/
.td_replacer{display:table-cell;}

J'espère que cela aide quelqu'un.

Vous pouvez remplir les éléments <td /> avec des éléments <div /> et appliquer n'importe quelle marge aux divisions que vous aimez. Pour un espace visuel entre les lignes, vous pouvez utiliser une image d'arrière-plan répétitive sur l'élément <tr />. (C'était la solution que je viens d'utiliser aujourd'hui, et elle semble fonctionner à la fois dans IE6 et FireFox 3, bien que je ne l'ai pas testée plus loin.)

De plus, si vous ne souhaitez pas modifier le code de votre serveur pour mettre des <div /> à l'intérieur des <td />, vous pouvez utiliser jQuery (ou quelque chose de similaire) pour encapsuler dynamiquement le contenu de <td /> dans un <div / >, vous permettant d'appliquer le CSS comme vous le souhaitez.

Ou ajoutez simplement un blanc avec la hauteur de la marge entre les lignes que vous souhaitez ajouter l'espacement

Voici une solution simple et élégante, avec quelques mises en garde:

• Vous ne pouvez pas réellement rendre les espaces transparents, vous devez leur donner une couleur spécifique.
• Vous ne pouvez pas arrondir les coins des bordures au-dessus et en dessous des espaces
• Vous devez connaître le remplissage et les bordures de vos cellules de tableau

Dans cet esprit, essayez ceci:

td {padding:5px 8px;border:2px solid blue;background:#E0E0E0}  /* lets say the cells all have this padding and border, and the gaps should be white */

tr.gapbefore td {overflow:visible}
tr.gapbefore td::before,
tr.gapbefore th::before
{
  content:"";
  display:block;
  position:relative;
  z-index:1;
  width:auto;
  height:0;
  padding:0;
  margin:-5px -10px 5px;  /* 5px = cell top padding, 10px = (cell side padding)+(cell side border width)+(table side border width) */
  border-top:16px solid white;  /* the size & color of the gap you want */
  border-bottom:2px solid blue; /* this replaces the cell's top border, so should be the same as that. DOUBLE IT if using border-collapse:separate */
}

En fait, vous collez un ::beforebloc rectangulaire en haut de toutes les cellules de la ligne que vous souhaitez précédé d'un espace. Ces blocs dépassent un peu des cellules pour chevaucher les bordures existantes, les cachant. Ces blocs sont juste une bordure supérieure et inférieure prises en sandwich ensemble: la bordure supérieure forme l'espace, et la bordure inférieure recrée l'apparence de la bordure supérieure d'origine des cellules.

Notez que si vous avez une bordure autour du tableau lui-même ainsi que des cellules, vous devrez augmenter davantage la marge horizontale -ve de vos «blocs». Donc, pour une bordure de table 4px, vous utiliseriez plutôt:

margin:-5px -12px 5px;     /* 14px = original 10px + 2px for 'uncollapsed' part of table border */

Et si votre table utilise à la border-collapse:separateplace de border-collapse:collapse, vous devrez (a) utiliser la largeur de bordure de table complète:

margin:-5px -14px 5px;     /* 14px = original 10px + 4px full width of table border */

... et aussi (b) remplacer la bordure à double largeur qui doit maintenant apparaître sous l'écart:

border-bottom:4px solid blue;     /* i.e. 4px = cell top border + previous row's bottom border */

La technique est facilement adaptée à une version .gapafter, si vous préférez, ou à la création d'espaces verticaux (colonnes) au lieu d'écarts de ligne.

Voici un codepen où vous pouvez le voir en action: https://codepen.io/anon/pen/agqPpW

Ici, cela fonctionne bien:

#myOwnTable td { padding: 6px 0 6px 0;}

Je suppose que vous pourriez élaborer une mise en page plus fine en spécifiant quel td si nécessaire.

faire cela montré ci-dessus ...

table tr{ float: left width: 100%; }  tr.classname { margin-bottom:5px; } 

supprime l'alignement vertical des colonnes, alors faites attention à la façon dont vous l'utilisez

As-tu essayé:

tr.classname { margin-bottom:5em; }

Alternativement, chaque td peut également être ajusté:

td.classname { margin-bottom:5em; }

ou

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