How to make table borders invisible with CSS

Question

I know this is an oft asked question, but I've tried some of the solutions (such as How to make separating lines/borders in a table disappear with CSS?) but I still can't quite get it.

I have defined via css a table structure with alternating row colors. I'd like the (in particular vertical) borders between teh cells to be invisible and so suppose I either need a zero td border width, or the alternating td border colors to be the same as the background colors.

Example below is what I've tried, in calling a table1 id from html, I get a nice alternating colored row table but with obvious cell borders still - appreciate your help.

#table1 table, tr, td, th {
     border: 0;
}

#table1 tbody tr:nth-child(odd) {
     background-color: #A3B9D2; 
}

#table1 tbody tr:nth-child(even) {
     background-color: #E7EDF3;
}

and then sample html;

<table id="table1" >
   <tr>
     <td>Test</td><td>(value)</td>
   </tr>
   <tr>
     <td>Test2</td><td>(value2)</td>
   </tr>
</table>

Answer 1

It's possible that what you're describing is cellspacing. If that's the case try this in your HTML:

<table cellpadding="0" cellspacing="0" border="0">
  ...
</table>

Cellspacing refers to the space between cells; it's not a border exactly. So, if you're seeing invisible or non-colored spaces between your tds, try adding the cellspacing="0" attribute to your table tag.