How to make table borders invisible with CSS - html

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.

Answer 2

You can also use this style:
#table1 {border:0px solid transparent;}

Answer 3

Try this
#table1 {
border-collapse: collapse;
}

Answer 4

Using cellspacing="0" is indeed a sure-fire way to get rid of those pesky lines. But, personally, I've never liked it - because I have to apply it in each and every table that I create throughout a site, instead of in one neat, centralized spot.
So, I usually go for a solution like elclanrs's in a CSS file. The cool thing about that solution is that you can remove some of the tags ahead of it to apply lines/borders for just those.
So, in other words, to put a border around a table - without having all of the cells divvied up between lines too - you can do something like this:
tr, td, th
{
border: 0;
}
Good luck!

Answer 5

#table1 table, tr, td, th {} is wrong.
You should do:
#table1,
#table1 tr,
#table1 td { border: 0; }

Answer 6

It seems that you are applying the style to tables within table1. The first declaration should actually be:
#table1 {
border: 0;
}
or
table #table1 {
border: 0;
}

Answer 7

What browser are you using? For complete backwards compatibility you still need the cellspacing="0" attribute set on the table.
http://jsfiddle.net/RmhxH/

Answer 8

Try this:
table,td,tr,th{
border:0;
}