Question

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 1

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.