How to add a margin to a table row <tr>

The border-spacing property will work for this particular case.

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

Reference.


You can't style the <tr>s themselves, but you can give the <td>s inside the "highlight" <tr>s a style, like this

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

Table rows cannot have margin values. Can you increase the padding? That would work. Otherwise you could insert a <tr class="spacer"></tr> before and after the class="highlighted" rows.


line-height can be the possible solution

tr
{
    line-height:30px;
}

Tags:

Css