Removendo bordas de células indesejadas da tabela com CSS

87

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.

Prumo
fonte
2
Obrigado a todos que sugeriram adicionar border-collapse: collapse ao CSS. Isso foi o suficiente.
Bob

Respostas:

210

Você precisa adicionar isso ao seu CSS:

table { border-collapse:collapse }
Doug Neiner
fonte
13
Observe que isso deve ser aplicado à tabela , não aos td 's. Acabei de cometer esse erro e passei mais de meia hora tentando descobrir por que não estava funcionando.
javawizard
16

adicione alguns css:

td, th {
   border:none;
}
Dave Markle
fonte
1
não funciona para mim no Chrome 60.0.3112.113 quando aplicado à tabela
Abdullah Gheith
15

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;
}
Gabriel McAdams
fonte
12

para remover a borda, juste usando css assim:

td {
 border-style : hidden!important;
}
Amine_Dev
fonte
8

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.

SLaks
fonte
1

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

falc0n
fonte
1
Cellpadding é o espaço entre o conteúdo da tabela e seus limites td{padding:X}. Cellspacing é o espaço entre os bourdries de cada célula ("margem" entre as bordas da célula). Você pode definir border-collapsepara imitar o que o cellspacingatributo faz na tag da tabela, mas não é à prova de falhas.
MetalFrog
1

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;
}
Jessica Escobar
fonte
0

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

Josh Anderson
fonte
3
@Josh não é border: none?
Doug Neiner
Postagem antiga @DougNeiner, mas nenhuma e 0 são igualmente válidas. Gosto de 0 porque tenho que digitar menos :)
Scott Simontis
-1

às vezes, mesmo depois de limpar borders.

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

Bresleveloper
fonte