css - table row background color fill all padding space

Question

I have an html table that looks like this:

<table style="border-spacing: 10px">
 <tr style='background-color:red'>
  <td><b>Member</b></td>
  <td><b>Account #</b></td>
  <td><b>Site</b></td>
  <td><b>Date</b></td>
 </tr>
</table>

The padding in between the elements is fine, but the background color seems to only fill the TDs and leave lots of gaps because of padding/spacing. How can I make the TR background color fill the entire row, and flow through the 10px border spacing?

Answer 1

Use the border-collapse:collapse; to collapse the gaps and add any padding you need with:

table {
    border-collapse:collapse;
}
td {
    padding: 8px;
}

jsFiddle example

Answer 2

Apply the background on the table not on the tr:

<table style="border-spacing: 10px; background-color:red;">
 <tr style=''>
  <td><b>Member</b></td>
  <td><b>Account #</b></td>
  <td><b>Site</b></td>
  <td><b>Date</b></td>
 </tr>
</table>

http://jsfiddle.net/helderdarocha/C7NBy/