Comment ajouter une marge à une ligne de tableau <tr>.

Question

J'ai un tableau contenant de nombreuses lignes. Certaines de ces lignes sont class="highlight" et signifient une ligne qui doit être stylisée différemment et mise en évidence. Ce que j'essaie de faire, c'est d'ajouter un espace supplémentaire avant et après ces rangées afin qu'elles apparaissent légèrement séparées des autres rangées.

Je pensais que je pourrais le faire avec margin-top:10px;margin-bottom:10px; mais ça ne marche pas. Quelqu'un sait-il comment faire, ou si c'est possible ? Voici le HTML et j'ai défini le deuxième tr dans le tbody comme classe de mise en évidence.

<table>
<thead>
  <tr>
     <th>Header 1</th>
     <th>Header 2</th>
  </tr>
</thead>
<tbody>
  <tr>
     <td>Value1</td>
     <td>Value2</td>
  </tr>
  <tr class="highlight">
     <td>Value1</td>
     <td>Value2</td>
  </tr>
  <tr>
     <td>Value1</td>
     <td>Value2</td>
  </tr>
  <tr>
     <td>Value1</td>
     <td>Value2</td>
  </tr>
</tbody>
</table>

Answer 1

Les lignes du tableau ne peuvent pas avoir de valeurs de marge. Pouvez-vous augmenter le padding ? Cela pourrait fonctionner. Sinon, vous pourriez insérer un <tr class="spacer"></tr> avant et après le class="highlighted" rangs.

Answer 2

Vous ne pouvez pas styliser le <tr> eux-mêmes, mais vous pouvez donner aux <td> à l'intérieur du "highlight". <tr> s un style, comme ceci

tr.highlight td {
  padding-top: 10px; 
  padding-bottom:10px
}

Answer 3

La hauteur de ligne peut être une solution possible

tr
{
    line-height:30px;
}

Answer 4

Voici la réponse pour vous.. http://jsfiddle.net/mXMED/2/

Answer 5

Je vous suggère fortement de jeter un coup d'œil à vos statistiques et de voir combien d'utilisateurs IE7 ou moins visitent votre site. J'ai découvert que je peux maintenant abandonner la prise en charge d'IE7, ce qui signifie que je peux utiliser des tableaux CSS... ce qui rendra les choses beaucoup plus faciles à travailler.