CODEWITHSUNDEEP
htmlcsshtml-table
Mark Burgoyne
Mark Burgoyne

Reputation: 1594

How to make table borders invisible with CSS

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>

Upvotes: 8

Views: 83500

Answers (8)

Sriram Sundarajan
Sriram Sundarajan

Reputation: 1

Try this:

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

Upvotes: 0

Jeff Mahoney
Jeff Mahoney

Reputation: 231

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!

Upvotes: 3

Tracy Fu
Tracy Fu

Reputation: 1662

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.

Upvotes: 14

Ricardo Tomasi
Ricardo Tomasi

Reputation: 35253

What browser are you using? For complete backwards compatibility you still need the cellspacing="0" attribute set on the table.

http://jsfiddle.net/RmhxH/

Upvotes: 0

NewUser
NewUser

Reputation: 13333

Try this

#table1 {
   border-collapse: collapse;
}

Upvotes: 3

TheGeekYouNeed
TheGeekYouNeed

Reputation: 7539

You can also use this style:

#table1 {border:0px solid transparent;}

Upvotes: 4

elclanrs
elclanrs

Reputation: 94101

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

You should do:

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

Upvotes: 1

Christophe
Christophe

Reputation: 28114

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; }

Upvotes: 0

Related Questions