Removing unwanted table cell borders with CSS

Question

I have a peculiar and frustrating problem  For the simple markup    lt table gt       lt thead gt           lt tr gt  lt th gt 1 lt  th gt  lt th gt 2 lt  th gt  lt th gt 3 lt  th gt  lt  tr gt        lt  thead gt       lt tbody gt           lt tr gt  lt td gt a lt  td gt  lt td gt b gt  lt  td gt  lt td gt c lt  td gt  lt  tr gt           lt tr class  odd  gt  lt td gt x lt  td gt  lt td gt y lt  td gt  lt td gt z lt  td gt  lt  tr gt       lt  tbody gt   lt  table gt    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

User · Answer

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

User · Answer

to remove the border   juste using css like this     td    border-style   hidden important

User · Answer

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

User · Answer

You need to add this to your CSS   table   border-collapse collapse

User · Answer

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

User · Answer

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

User · Answer

Modify your HTML like this    lt table border  0  cellpadding  0  cellspacing  0  gt       lt thead gt           lt tr gt  lt td gt 1 lt  td gt  lt td gt 2 lt  td gt  lt td gt 3 lt  td gt  lt  tr gt        lt  thead gt       lt tbody gt           lt tr gt  lt td gt a lt  td gt  lt td gt b gt  lt  td gt  lt td gt c lt  td gt  lt  tr gt           lt tr class  odd  gt  lt td gt x lt  td gt  lt td gt y lt  td gt  lt td gt z lt  td gt  lt  tr gt       lt  tbody gt   lt  table gt     I added border  0  cellpadding  0  cellspacing  0    In CSS  you could do the following   table       border-collapse  collapse

User · Answer

add some css   td  th      border none

User · Answer

sometimes even after clearing borders   the reason is that you have images inside the td  giving the images display block solves it

[html] Removing unwanted table cell borders with CSS

Examples related to html

Examples related to css

Examples related to html-table