Removing unwanted table borders with CSS

Question

I have a peculiar and unpleasant problem. For 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 various background color values ​​to the thead, tr and tr elements odd. The problem is that in most browsers, each cell has an undesirable border that is not the color of any of the rows in the table. Only in Firefox 3.5 a table has no borders in any cell.

I just wanted to know how to remove these borders in other major browsers, so the only thing you see in the table is the alternating row colors.

Answer 1

You need to add this to your CSS:

 table { border-collapse:collapse } 

Answer 2

Change your HTML as follows:

 <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 can do the following:

 table { border-collapse: collapse; } 

Answer 3

add css:

 td, th { border:none; } 

Answer 4

Set the cellspacing attribute of the table to 0 .

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

Answer 5

to remove the border, juste using css like this:

 td { border-style : hidden!important; } 

Answer 6

You can also add

 table td { border:0; } 

the above is equivalent to setting cellpadding = "0"

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

Answer 7

After fulfilling the above suggestions, the only thing that worked for me was to change the border attribute to "0" in the following sections of the style.css child theme (perform the "Find" operation to find each of them - the following are only fragments):

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

Thus, as follows:

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

Answer 8

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

Answer 9

sometimes even after cleaning border s.

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

Answer 10

 <td style=" border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px;"> 

And if you want, you can do something like that

 $style = ' style=" border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px;"'; <td $style>bla bla</td><td $style>bla bla</td><td $style>bla bla</td><td $style>bla bla</td>