Removendo bordas de células indesejadas da tabela com CSS

Tenho um problema peculiar e frustrante. Para a marcação simples:

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

Eu aplico diferentes valores de cor de fundo ao thead , tr e tr odd. O problema é que, na maioria dos navegadores, cada célula possui uma borda indesejada que não é da cor de nenhuma das linhas da tabela. Somente no Firefox 3.5 a tabela não possui bordas em nenhuma célula.

Eu só gostaria de saber como remover essas bordas nos outros navegadores principais para que a única coisa que você veja na tabela sejam as cores das linhas alternadas.

Você precisa adicionar isso ao seu CSS:

table { border-collapse:collapse }

adicione alguns css:

td, th {
   border:none;
}

Modifique seu HTML assim:

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

(Eu adicionei border="0" cellpadding="0" cellspacing="0" )

Em CSS, você pode fazer o seguinte:

table {
    border-collapse: collapse;
}

para remover a borda, juste usando css assim:

td {
 border-style : hidden!important;
}

Defina o cellspacingatributo da tabela como 0.

Você também pode usar o estilo CSS border-spacing: 0, mas apenas se não precisar oferecer suporte a versões anteriores do IE.

Você também pode querer adicionar

table td { border:0; }

o acima é equivalente a definir cellpadding = "0"

elimina o preenchimento automaticamente adicionado às células pelos navegadores que podem depender do doctype e / ou qualquer CSS usado para redefinir os estilos padrão do navegador

Depois de tentar as sugestões acima, a única coisa que funcionou para mim foi alterar o atributo border para "0" nas seções a seguir de style.css de um tema filho (faça uma operação "Find" para localizar cada um - os seguintes são apenas trechos):

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

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

Assim, depois disso:

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

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

Experimente atribuir o estilo de border: 0px; border-collapse: collapse;ao elemento da tabela.

às vezes, mesmo depois de limpar borders.

a razão é que você tem imagens dentro do td, dar as imagens display:blockresolve.