views:

612

answers:

5

Hello everyone, I have a peculiar and frustrating problem. For the simple markup:

<table>
    <thead>
        <tr><th>1</th><th>2</th><th>3</th></tr>
     </thead>
    <tbody>
        <tr><td>a</td><td>b></td><td>c</td></tr>
        <tr class='odd'><td>x</td><td>y</td><td>z</td></tr>
    </tbody>
</table>

I apply different background-color values to the thead, tr, and tr.odd elements. The problem is that in most browsers, every cell has an unwanted border which is not the color of any of the table rows. Only in Firefox 3.5 does the table have no borders in any cell.

I'd just like to know how to remove these borders in the other major browsers so that the only thing you see in the table are the alternating row colors. Thanks.

A: 

Modify your html like this:

<table border="0" cellpadding="0" cellspacing="0">
    <thead>
        <tr><td>1</td><td>2</td><td>3</td></tr>
     </thead>
    <tbody>
        <tr><td>a</td><td>b></td><td>c</td></tr>
        <tr class='odd'><td>x</td><td>y</td><td>z</td></tr>
    </tbody>
</table>

(I added border="0" cellpadding="0" cellspacing="0")

In CSS, you could do the following:

table {
    border-collapse: collapse;
}
Gabriel McAdams
CSS is the preferred way.
Dave Markle
Modified my answer to include css
Gabriel McAdams
+3  A: 

You need to add this to your css:

table { border-collapse:collapse }
Doug Neiner
A: 

Try assigning the style of border: 0px; border-collapse: collapse; to the table element.

Josh
@Josh isn't it `border: none`?
Doug Neiner
A: 

Set the cellspacing attribute of the table to 0.

You can also use the CSS style, border-spacing: 0, but only if you don't need to support older versions of IE.

SLaks
A: 

add some css:

td, th {
   border:none;
}
Dave Markle