29.11.2024

Adicionando uma Bordura Inferior às Linhas da Tabela HTML com CSS

Resposta Rápida

Para adicionar uma borda inferior às células <td> ou <th>, utilize a propriedade CSS border-bottom. Abaixo estão diversos exemplos que funcionam corretamente em todos os navegadores modernos:

/* Sempre sublinhar o conteúdo */
tr td, tr th {
  border-bottom: 2px pontilhado #000; 
}

Estilizando apenas a última linha da tabela:

/* Contornar apenas a última linha */
tr:last-child td, tr:last-child th {
  border-bottom: none;
}

Omitindo a borda da última linha com cores de células alternadas:

/* Fundo alternado sem borda no final */
tr:not(:last-child) td, tr:not(:last-child) th {
  border-bottom: 1px sólido #ccc;
}

Agora as bordas nas suas linhas estão organizadas e serão exibidas corretamente em todos os navegadores.

Conclusão

Se você tiver dúvidas sobre bordas duplas ou individuais entre células, recomendamos utilizar a propriedade border-collapse. Ela elimina espaços indesejados:

table {
  /* Bordas das células agora estão unidas */
  border-collapse: collapse;
}

Visualização

Vamos imaginar uma linha da tabela <tr> como um equilibrista atravessando uma rua feita de células:

Antes:

| 🏠 | 🏠 | 🏠 | 🏠 |

Vamos garantir que nosso equilibrista esteja seguro com uma corda de segurança:

tr { border-bottom: 2px sólido #000; }

E agora ele passa por cada casa em total segurança:

Depois:

| 🏠 | 🏠 | 🏠 | 🏠 |
|------------------| // A corda de segurança está esticada!

Cada célula é destacada, criando uma linha contínua ao longo de toda a linha.

Recursos Úteis

1. Estilizando Tabelas - MDN — Um excelente guia para trabalhar com estilos de bordas em tabelas.
2. Estilização de Tabelas em CSS - W3Schools — Um tutorial detalhado sobre estilização de tabelas com CSS.
3. Especificidade em CSS - CSS-Tricks — Uma análise detalhada das especificações de prioridade dos seletores CSS.
4. Usando Pseudo-elementos - CSS-Tricks — Uma visão geral das aplicações práticas de pseudo-elementos no design.
5. Tamanho de Caixa - CSS-Tricks — Uma visão abrangente sobre a propriedade box-sizing e seu impacto nas bordas.
6. Tabelas Responsivas - CSS-Tricks — Dicas úteis para criar tabelas responsivas.
7. Especificidade em CSS - Smashing Magazine — Análise detalhada sobre a especificidade de seletores necessária para entender a gestão de estilos em <tr>.

Video

Navigation