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.
html
css
html-table
Prumo
fonte
fonte
Respostas:
Você precisa adicionar isso ao seu CSS:
table { border-collapse:collapse }
fonte
adicione alguns css:
td, th { border:none; }
fonte
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; }
fonte
para remover a borda, juste usando css assim:
td { border-style : hidden!important; }
fonte
Defina o
cellspacing
atributo da tabela como0
.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.fonte
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
fonte
td{padding:X}
. Cellspacing é o espaço entre os bourdries de cada célula ("margem" entre as bordas da célula). Você pode definirborder-collapse
para imitar o que ocellspacing
atributo faz na tag da tabela, mas não é à prova de falhas.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; }
fonte
Experimente atribuir o estilo de
border: 0px; border-collapse: collapse;
ao elemento da tabela.fonte
border: none
?às vezes, mesmo depois de limpar
border
s.a razão é que você tem imagens dentro do
td
, dar as imagensdisplay:block
resolve.fonte