How to make table borders invisible using CSS

Question

I know this is a frequently asked question, but I tried some of the solutions (e.g. How to make dividing lines / borders in a table disappear using CSS? ), But I still can not get it.

I defined through css a table structure with alternating row colors. I would like the (in particular vertical) borders between cells to be invisible, and so suppose I need either the zero width of the border td or the alternating colors of the border td so that they are the same as the background colors.

The example below is what I tried, calling the table1 identifier from html, I get a beautiful alternating color table of rows, but with explicit cell borders - I 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 a 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 is possible that what you are describing is a cell. If this case tries this in your HTML:

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

Cellspacing refers to the space between cells; this is not the border for sure. So, if you see invisible or non-color 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 it

 #table1 { border-collapse: collapse; } 

Answer 4

Using cellspacing="0" is a really reliable way to get rid of these annoying strings. But personally, I never liked it - because I have to apply it in every table that I create on the site, and not in one neat, centralized place.

So, I usually use a solution like elclanrs in the CSS file. The most interesting thing about this solution is that you can remove some tags in front of it to apply lines / borders only to them.

So, in other words, to put a border around the table - without all the cells being split between the rows, you can do something like this:

 tr, td, th { border: 0; } 

Good luck

Answer 5

#table1 table, tr, td, th {} is incorrect.

You should:

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

Answer 6

It seems that you are applying style to the tables inside table1. The first declaration should be:

# table1 {border: 0; }

or

table # table1 {border: 0; }

Answer 7

Which browser are you using? For full backward compatibility, you still need the attribute cellspacing="0" specified in the table.

http://jsfiddle.net/RmhxH/

Answer 8

Try the following:

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