Removing unwanted table cell borders with CSS

Question

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 to everyone who suggested adding border-collapse:collapse to the CSS. That did it. — Bob, Jan 11 '10 at 01:47

score 234 · Accepted Answer · edited Oct 20 '13 at 17:37

234

You need to add this to your CSS:

table { border-collapse:collapse }

edited Oct 20 '13 at 17:37

Josh Crozier

233,099
56
391
304

answered Jan 11 '10 at 01:38

Doug Neiner

65,509
13
109
118

14

Note that this has to be applied to the _table_, not the _td_'s. I just made this mistake and spent upwards of half an hour trying to figure out why it wasn't working. – javawizard Jul 05 '14 at 02:22

score 31 · Answer 2 · answered Apr 02 '17 at 11:59

31

to remove the border , juste using css like this :

td {
 border-style : hidden!important;
}

answered Apr 02 '17 at 11:59

Aouidane Med Amine

1,571
16
17

pretty straightforward and works like a charm, thanks! – Youssef Snoussi Aug 29 '22 at 08:58
I know long time pasted, but your answer really helped me, without any `border-collapse`! Upvote + thanks! – SNBS Mar 09 '23 at 06:02

score 22 · Answer 3 · edited Oct 04 '17 at 17:34

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

score 9 · Answer 4 · answered Jan 11 '10 at 01:38

9

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.

answered Jan 11 '10 at 01:38

SLaks

868,454
176
1,908
1,964

score 1 · Answer 5 · edited Jun 27 '12 at 00:26

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

score 1 · Answer 6 · answered Mar 12 '12 at 23:11

1

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

answered Mar 12 '12 at 23:11

falc0n

21
1

1

Cellpadding is the space between the table content and its boundries `td{padding:X}`. Cellspacing is the space between each cell's bourdries ("margin" between cell borders). You can set `border-collapse` to mimic what the `cellspacing` attribute does on the table tag, but it's not foolproof. – MetalFrog Mar 13 '12 at 19:17

score 0 · Answer 7 · answered Jan 11 '10 at 01:38

0

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

answered Jan 11 '10 at 01:38

Josh Anderson

5,975
2
35
48

3

@Josh isn't it `border: none`? – Doug Neiner Jan 11 '10 at 01:40
@DougNeiner Old post, but none and 0 are both equally valid. I like 0 because I have to type less :) – Scott Simontis Mar 09 '15 at 15:48

score -1 · Answer 8 · edited May 26 '16 at 23:31

-1

sometimes even after clearing borders.

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

edited May 26 '16 at 23:31

dippas

58,591
15
114
126

answered Jul 23 '14 at 13:23

bresleveloper

5,940
3
33
47

Removing unwanted table cell borders with CSS

8 Answers8

Linked

Related