sameold sameold - 5 months ago 31
CSS Question

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

I have a table containing many rows. Some of these rows are

class="highlight"
and signify a row that needs to be styled differently and highlighted. What I'm trying to do is add some extra spacing before and after these rows so they appear slightly separated from the other rows.

I thought I could get this done with
margin-top:10px;margin-bottom:10px;
but it's not working. Anyone knows how to get this done, or if it could be done? Here's the HTML and I've set the 2nd tr in the tbody to class highlight.

<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

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.

Comments