CODEWITHSUNDEEP
htmlcsshtml-table
Bob
Bob

Reputation: 1110

Removing unwanted table cell borders with CSS

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.

Upvotes: 105

Views: 397704

Answers (8)

Gabriel McAdams
Gabriel McAdams

Reputation: 58253

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

Upvotes: 23

Aouidane Med Amine
Aouidane Med Amine

Reputation: 1681

to remove the border , juste using css like this : 

td {
 border-style : hidden!important;
}

Upvotes: 34

bresleveloper
bresleveloper

Reputation: 6070

sometimes even after clearing borders.

the reason is that you have images inside the td, giving the images display:block solves it.

Upvotes: -1

Doug Neiner
Doug Neiner

Reputation: 66191

You need to add this to your CSS:

table { border-collapse:collapse }

Upvotes: 237

Jessica Escobar
Jessica Escobar

Reputation: 19

After trying the above suggestions, the only thing that worked for me was changing the border attribute to "0" in the following sections of a child theme's style.css (do a "Find" operation to locate each one -- the following are just snippets):

.comment-content table {
    border-bottom: 1px solid #ddd;

.comment-content td {
    border-top: 1px solid #ddd;
    padding: 6px 10px 6px 0;
}

Thus looking like this afterwards:

.comment-content table {
    border-bottom: 0;

.comment-content td {
    border-top: 0;
    padding: 6px 10px 6px 0;
}

Upvotes: 1

falc0n
falc0n

Reputation: 21

You may also want to add

table td { border:0; }

the above is equivalent to setting cellpadding="0"

it gets rid of the padding automatically added to cells by browsers which may depend on doctype and/or any CSS used to reset default browser styles

Upvotes: 1

SLaks
SLaks

Reputation: 887195

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.

Upvotes: 9

Josh Anderson
Josh Anderson

Reputation: 6005

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

Upvotes: 0

Related Questions