Edit - Título original: Existe uma forma alternativa para alcançar border-collapse:collapse
no CSS
(a fim de ter, uma mesa de canto arredondado desmoronou)?
Como acontece que o simples recolhimento das bordas da tabela não resolve o problema raiz, atualizei o título para refletir melhor a discussão.
Estou tentando fazer uma tabela com cantos arredondados usando a CSS3
border-radius
propriedade Os estilos de tabela que estou usando são mais ou menos assim:
table {
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px
}
Aqui está o problema. Também quero definir a border-collapse:collapse
propriedade e, quando isso estiver definido, border-radius
não funcionará mais. Existe uma maneira baseada em CSS em que eu possa obter o mesmo efeito que border-collapse:collapse
sem realmente usá-lo?
Editar% s:
Criei uma página simples para demonstrar o problema aqui (apenas Firefox / Safari).
Parece que grande parte do problema é que definir a mesa com cantos arredondados não afeta os cantos dos td
elementos dos cantos . Se a tabela tivesse apenas uma cor, isso não seria um problema, pois eu poderia fazer os td
cantos superior e inferior arredondados para a primeira e a última linha, respectivamente. No entanto, estou usando diferentes cores de plano de fundo na tabela para diferenciar os títulos e as faixas, para que os td
elementos internos também mostrem seus cantos arredondados.
Resumo das soluções propostas:
Cercar a mesa com outro elemento com cantos arredondados não funciona porque os cantos quadrados da mesa "vazam".
A especificação da largura da borda como 0 não reduz a tabela.
Os td
cantos inferiores ainda ficam quadrados depois de definir o espaçamento entre células como zero.
Usar JavaScript - funciona evitando o problema.
Soluções possíveis:
As tabelas são geradas em PHP, então eu poderia aplicar uma classe diferente a cada um dos th / tds externos e estilizar cada canto separadamente. Prefiro não fazer isso, já que não é muito elegante e um pouco trabalhoso aplicar a várias tabelas, por isso, mantenha as sugestões.
A possível solução 2 é usar JavaScript (jQuery, especificamente) para estilizar os cantos. Essa solução também funciona, mas ainda não é exatamente o que estou procurando (sei que sou exigente). Eu tenho duas reservas:
- este é um site muito leve e eu gostaria de manter o JavaScript o mínimo possível
- parte do apelo que o uso do raio da borda tem para mim é degradação graciosa e aprimoramento progressivo. Usando o raio da borda para todos os cantos arredondados, espero ter um site consistentemente arredondado em navegadores compatíveis com CSS3 e um site consistentemente quadrado em outros (estou olhando para você, IE).
Sei que tentar fazer isso com CSS3 hoje pode parecer desnecessário, mas tenho minhas razões. Gostaria também de salientar que esse problema é resultado da especificação w3c, e não do suporte ao CSS3, portanto qualquer solução ainda será relevante e útil quando o CSS3 tiver um suporte mais amplo.