How to add a margin to a table row [duplicate]

Answer 1

line-height can be the possible solution

tr
{
    line-height:30px;
}

Answer 2

add a div to the cells that you would like to add some extra spacing:

<tr class="highlight">
 <td><div>Value1</div></td>
 <td><div>Value2</div></td>
</tr>
tr.highlight td div {
margin-top: 10px;
}

Answer 3

Another possibility is to use a pseudo selector :after or :before

tr.highlight td:last-child:after
{
  content: "\0a0";
  line-height: 3em;
}

That might avoid issues with browser that don't understand the pseudo selectors, plus background-colors are not an issue.

The downside is however, that it adds some extra whitespace after the last cell.

Answer 4

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}

Answer 5

This isn't going to be exactly perfect though I was happy to discover that you can control the horizontal and vertical border-spacing separately:

table
{
 border-collapse: separate;
 border-spacing: 0 8px;
}

Answer 6

I know this is kind of old, but I just got something along the same lines to work. Couldn't you do this?

tr.highlight {
    border-top: 10px solid;
    border-bottom: 10px solid;
    border-color: transparent;
}

Hope this helps.