08.04.2025

Aplicando Bordas a Elementos tr em HTML: Solução de Problemas

Resposta Rápida

Se você deseja ver uma borda em um elemento tr, é necessário especificar border: 1px solid black; nos estilos para td. Além disso, a tabela deve ter a propriedade border-collapse: separate; definida. Isso impedirá que as bordas se fundam entre células adjacentes.

Confira o exemplo:

<style>
  table { border-collapse: separate; }
  td { border: 1px solid black; }
</style>
<table>
  <tr>
    <td>Universo em uma célula</td>
    <td>E biscoitos também!</td>
  </tr>
</table>

Portanto, para garantir a visibilidade da borda para cada td, você está, na verdade, ajudando a formar uma borda para toda a linha. Lembre-se, aplicar uma borda diretamente ao tr não é possível, mas existe uma maneira indireta de contornar essa limitação, definindo uma borda para cada célula.

Analisando: Modelo de Caixa de Bordas CSS para Tabelas

Vamos nos aprofundar no modelo de caixa de bordas CSS para tabelas. O papel principal é exercido pela propriedade border-collapse. Se seu valor for collapse, as bordas das células se fundem. Se separate for escolhido, as bordas permanecem distintas.

É importante lembrar que navegadores têm estilos padrão integrados que podem impactar como suas tabelas são exibidas. Utilize as ferramentas de desenvolvedor para analisar tais questões.

Destaque: A Propriedade Border-Collapse

A propriedade border-collapse influencia como as bordas da tabela serão exibidas:

• collapse: Bordas se fundem, formando um único contorno na interseção das células.
• separate: Cada célula tem sua própria borda independente.

Se a independência das bordas para cada célula for necessária, utilize o valor separate.

Alinhamento do Comportamento de Bordas de Tabela em Diferentes Navegadores

A exibição da borda de tabela pode não funcionar corretamente em diferentes navegadores. Para padronizar a aparência, siga estas dicas simples:

• Aplique a borda não a tr, mas diretamente a td.
• Utilize regras CSS específicas para substituir os estilos padrões do navegador.

Usando Técnicas de Box-Shadow para Criar Bordas de Linhas de Tabela

Para simular o efeito de bordas em linhas de tabela (tr), você pode usar box-shadow:

<style>
  tr { box-shadow: inset 0 0 0 1px black; }
</style>

Essa "borda" parecerá como uma borda real, permitindo que você evite problemas com a fusão das bordas das células.

Visualização

Você pode visualizar uma linha da tabela como uma série de picos montanhosos. Adicionar contornos é semelhante a desenhar um anel ao redor de cada pico.

🏞️ Cadeia de Montanhas: [Pico 1, Pico 2, Pico 3]
🔥 Anel de Fogo ao redor do Pico 2: Impossível desenhar no ar.

O resultado seria se tentássemos definir uma borda para tr:

<tr style="border: 1px solid black;">...</tr>  <!-- Mas estamos tentando desenhar bordas no ar! -->

E aqui está a abordagem correta com td:

Pico 2 🔥: [Célula 1, Célula 2, Célula 3]
// Para cada `td`, definimos nosso próprio "Anel de Fogo" sem nos preocupar com `tr`.

<tr>
  <td style="border: 1px solid black;">...</td>
  <td style="border: 1px solid black;">...</td>
  <td style="border: 1px solid black;">...</td>
</tr>

Agora, cada célula está cercada pelo seu próprio "Anel de Fogo".

Aprofundando na Estratégia para Garantir a Visibilidade da Borda

Garantindo a Continuidade das Bordas

Para assegurar a continuidade das bordas em tabelas em diferentes navegadores, você deve usar a propriedade CSS:

table { border-collapse: collapse; }

Essa propriedade cria um espaço compartilhado para as bordas das células vizinhas e evita problemas no modo separate.

Trabalhando com as Peculiaridades dos Estilos Padrão do Navegador

Os estilos padrão dos navegadores podem distorcer a percepção de como uma tabela se parece. Utilizando as ferramentas de desenvolvedor, você pode investigar e ajustar a aparência desses estilos, melhorando o impacto das suas regras CSS personalizadas.

Criando uma Aparência Harmoniosa para as Bordas

Além de box-shadow, você pode usar outline para elementos td, criando uma separação visual sem alterar o modelo de caixa:

td { outline: 1px solid black; }  /* Estiloso e sem interrupções! */

Com essa abordagem, cada borda terá uma aparência limpa e uniforme em diferentes navegadores.

Recursos Úteis

1. Estilizando Tabelas com CSS — Um guia abrangente para estilizar tabelas com CSS.
2. Modelo de Caixa — Documentação oficial do W3C descrevendo o modelo de caixa CSS e as propriedades de borda.
3. CSS - O que é uma folha de estilo do agente do usuário? — Torne-se um especialista em folhas de estilo de navegador.
4. tr: O Elemento de Linha de Tabela - HTML: Linguagem de Marcador de Hipertexto — Documentação MDN sobre o elemento tr.
5. Visualizar e Alterar CSS | DevTools | Chrome para Desenvolvedores — Usando e modificando CSS nas Ferramentas de Desenvolvedor do Chrome.
6. Um Guia Completo para o Elemento Table | CSS-Tricks — Um guia completo para o elemento table em CSS.
7. Especificidade - CSS: Folhas de Estilo em Cascata — Uma análise dos conceitos básicos de especificidade em CSS.

Video

Navigation