10.04.2025

Usando Bordas Internas em Células de Tabela no CSS

Resposta Rápida

Se você precisa aplicar bordas dentro de uma tabela, use a propriedade CSS border para as células, excluindo as bordas externas. Defina a tabela com border-collapse: collapse; e defina as bordas usando as pseudo-classes :not(:first-child):not(:last-child). Aqui está um exemplo padrão de código:

table {border-collapse: collapse;}
td, th { padding: 8px; border: 1px solid transparent; }
tr:not(:first-child):not(:last-child) td,
tr td:not(:first-child):not(:last-child),
tr:first-child td:not(:first-child):not(:last-child),
tr:last-child td:not(:first-child):not(:last-child) {
    border-color: #000;
}

Dessa forma, estilizamos a tabela como uma "matriz", onde as bordas entre as células são compartilhadas e não há quadro externo.

Resolvendo Conflitos de Bordas

Quando as bordas entram em conflito, você pode achar útil a propriedade CSS border-style: hidden;. De acordo com o W3C, essa propriedade resolve conflitos de forma invisível. Você também pode tratar esse problema de forma mais simples usando os atributos HTML frame="void" e rules="all". Aqui está um exemplo de código:

table  { border-collapse: collapse; frame: void; rules: all; }
td, th { border: 1px solid black; }

Essa abordagem combina as capacidades do CSS e HTML para controlar o espaçamento interno da tabela.

Abordando Inconsistências de Navegadores

No entanto, navegadores web podem se comportar de maneira imprevisível, especialmente versões desatualizadas como IE7 ou IE8, que não suportam pseudo-classes CSS modernas. Mas não perca a esperança:

• Use a propriedade td + td, th + th { border-left: 1px solid; } para separação vertical de células.
• Para bordas internas horizontais, o seletor tr + tr { border-top: 1px solid; } funciona bem.
• Para IE7, você pode aplicar seletores como: tr + tr > td, tr + tr > th.

Não se esqueça de verificar os resultados em diferentes navegadores — isso é uma parte importante do trabalho de um desenvolvedor.

Garantindo a Responsividade do Design

Suas tabelas devem ser exibidas corretamente em todos os dispositivos, incluindo celulares e tablets. Use consultas de mídia para ajustar os tamanhos e formatos das tabelas para diferentes telas e evite rolagem horizontal.

Visualização

Imagine que os participantes da festa estão se sentando:

Participantes: 💁💁‍♂️ 🚶 💁💁‍♂️ 🚶 💁💁‍♂️

Agora eles mantêm alguma distância, assim como as bordas internas em uma tabela:

Participantes com espaçamento: 💁🔲💁‍♂️🔲 🚶 💁🔲💁‍♂️🔲 🚶 💁🔲💁‍♂️ 
# Cada 🔲 representa uma borda interna

Acessibilidade de Tabelas

As tabelas devem ser acessíveis a todos os usuários, incluindo aqueles que utilizam leitores de tela. Adicione atributos scope="col" ou scope="row" às células de cabeçalho da tabela e use cores de alto contraste para texto e bordas.

Eficácia dos Seletores CSS

Lembre-se de que os seletores CSS devem ser o mais eficientes e simples possível para garantir o melhor desempenho para o seu site. Evite construções complexas e difíceis de ler.

Conclusão

Certifique-se de demonstrar seus conhecimentos e os resultados do seu trabalho para colegas e clientes, mas não exagere. Mostre seus sucessos quando solicitado, fornecendo exemplos, demonstrações e links para fontes respeitáveis.

Recursos Úteis

1. Box Sizing | CSS-Tricks — um guia detalhado sobre a propriedade box-sizing.
2. Tag de tabela HTML — uma descrição abrangente da tag de tabela.
3. Estilizando Tabelas com CSS — material educativo sobre como estilizar tabelas usando CSS.
4. box-sizing - CSS: Cascading Style Sheets | MDN — tudo o que você precisa saber sobre a propriedade box-sizing.
5. Top 10 Designs de Tabelas em CSS — Smashing Magazine — dez soluções estilizadas para design de tabelas.
6. Propriedades Essenciais de CSS para Estilizar Tabelas - Tutorial Republic — propriedades chave para estilizar tabelas.

Video

Navigation