Tabela Framework
O sistema de tabela mais completo do mercado. Scroll com shadow indicator, sticky triple (header + col + last), skeleton loading, auto-counter CSS, row/cell status, density, glass, gradient - tudo sem uma linha de JS extra.
1. Estrutura Base
O wrapper .tbl é um div
que gerencia scroll, shadow indicator e todos os modificadores. A <table> fica dentro dele.
| Produto | Categoria | Preço | Estoque | Status |
|---|---|---|---|---|
| Monitor Ultra 4K | Hardware | R$ 2.899,00 | 14 | Ativo |
| Teclado Mecânico | Periférico | R$ 549,90 | 38 | Ativo |
| Webcam HD Pro | Periférico | R$ 289,00 | 0 | Sem estoque |
| Total em estoque | R$ 3.738,90 | 52 | ||
Estrutura fundamental com wrapper .tbl. Ativa o scroll
horizontal automático e o indicador de sombra.
? tfoot recebe estilo de totais automaticamente.
? td.is-num alinha à direita com fonte mono
tabular.
2. Skin de Bordas
Controla quais bordas aparecem.
.tbl (padrão - horizontal)
| Nome | Valor | Data |
|---|---|---|
| Alpha | 1.200 | Mar 2026 |
| Beta | 890 | Fev 2026 |
| Gamma | 3.410 | Jan 2026 |
Padrão do framework - separadores horizontais entre linhas.
.tbl.is-bor - bordas completas
| Nome | Valor | Data |
|---|---|---|
| Alpha | 1.200 | Mar 2026 |
| Beta | 890 | Fev 2026 |
| Gamma | 3.410 | Jan 2026 |
Aplica bordas completas em todas as células (estilo grade).
.tbl.is-col - apenas colunas
| Nome | Valor | Data |
|---|---|---|
| Alpha | 1.200 | Mar 2026 |
| Beta | 890 | Fev 2026 |
| Gamma | 3.410 | Jan 2026 |
Bordas apenas entre as colunas, criando um visual mais limpo.
.tbl.is-cln - sem bordas
| Nome | Valor | Data |
|---|---|---|
| Alpha | 1.200 | Mar 2026 |
| Beta | 890 | Fev 2026 |
| Gamma | 3.410 | Jan 2026 |
Remove todas as bordas internas, mantendo apenas o recuo de linha.
3. Densidade
Controla o espaço interno (padding) e o tamanho da fonte via tokens CSS internos.
.tbl.is-pp - compacto
| ID | Usuário | Ação | IP | Timestamp |
|---|---|---|---|---|
| 9821 | gabriel@email.com | login | 192.168.1.44 | 2026-03-16 14:32:01 |
| 9822 | admin@y2.dev | delete | 10.0.0.1 | 2026-03-16 14:33:45 |
| 9823 | user@empresa.br | export | 177.42.8.11 | 2026-03-16 14:35:22 |
Modo compacto com fontes reduzidas e padding mínimo, ideal para dashboards densos.
.tbl - padrão (base)
| Nome | Cargo | Departamento |
|---|---|---|
| Fernanda Lima | Diretora de Arte | Design |
| Carlos Andrade | Dev Senior | Engenharia |
| Julia Santos | Product Manager | Produto |
Tamanho padrão (default) do framework, equilibrado para leitura geral.
.tbl.is-g - espaçoso
| Plano | Usuários | Preço mensal |
|---|---|---|
| Starter | 1-5 | R$ 99 |
| Growth | 6-25 | R$ 349 |
| Scale | Ilimitado | R$ 999 |
Modo espaçoso com padding generoso, ideal para tabelas de apresentação e interfaces leves.
4. Style Variants
Combinações visuais prontas. Podem ser combinadas livremente.
.is-str - striped
| Cidade | Estado | Pop. |
|---|---|---|
| São Paulo | SP | 12,3M |
| Rio de Janeiro | RJ | 6,7M |
| Brasília | DF | 3,0M |
| Salvador | BA | 2,9M |
Aplica cores alternadas (zebrado) nas linhas para guiar o olhar horizontalmente.
.is-hvr - hover highlight
| Cidade | Estado | Pop. |
|---|---|---|
| São Paulo | SP | 12,3M |
| Rio de Janeiro | RJ | 6,7M |
| Brasília | DF | 3,0M |
| Salvador | BA | 2,9M |
Destaca a linha sob o cursor do mouse com feedback visual dinâmico.
.is-rnd - rounded
| Time | Pts | Posição |
|---|---|---|
| Flamengo | 78 | 1° |
| Palmeiras | 72 | 2° |
| Grêmio | 68 | 3° |
Bordas externas arredondadas aplicadas diretamente no wrapper da tabela.
.is-gls - glass morphism
| Crypto | Preço | 24h |
|---|---|---|
| Bitcoin | $ 87.420 | +4.2% |
| Ethereum | $ 3.210 | -1.8% |
| Solana | $ 142 | +9.1% |
Visual de vidro translúcido. Requer fundo com cor ou imagem para o efeito de blur disparar.
.is-grd - gradient header
| Métrica | Atual | Meta | Delta |
|---|---|---|---|
| MRR | R$ 48.200 | R$ 50.000 | 96% |
| Churn | 2.1% | ≤ 2.5% | ? |
| NPS | 72 | 70 | +2 |
Cabeçalho com gradiente da marca e tipografia branca de alto contraste.
thead.is-drk - header dark
| Servidor | CPU | RAM | Status |
|---|---|---|---|
| web-01 | 12% | 4.2 GB | Online |
| db-primary | 68% | 18.1 GB | Alta carga |
| cache-01 | 3% | 1.1 GB | Online |
Inverte o cabeçalho para fundo escuro, ideal para destacar títulos em listas longas.
5. Sticky Framework
Três eixos de sticky com z-index correto. A interseção header + primeira coluna recebe
z-index: 4 automaticamente.
Header + primeira coluna fixos - scroll horizontal e vertical
| Colaborador | Jan | Fev | Mar | Abr | Mai | Jun | Total |
|---|---|---|---|---|---|---|---|
| Ana Lima | R$ 8.200 | R$ 8.200 | R$ 8.500 | R$ 8.500 | R$ 9.000 | R$ 9.000 | R$ 51.400 |
| Bruno Costa | R$ 6.800 | R$ 6.800 | R$ 7.200 | R$ 7.200 | R$ 7.200 | R$ 7.200 | R$ 42.400 |
| Carla Melo | R$ 12.000 | R$ 12.000 | R$ 12.000 | R$ 13.500 | R$ 13.500 | R$ 13.500 | R$ 76.500 |
| Daniel Faria | R$ 5.400 | R$ 5.400 | R$ 5.400 | R$ 5.400 | R$ 5.800 | R$ 5.800 | R$ 33.200 |
| Eduarda Neves | R$ 9.600 | R$ 9.600 | R$ 9.600 | R$ 9.600 | R$ 9.600 | R$ 10.200 | R$ 58.200 |
| Felipe Torres | R$ 7.100 | R$ 7.100 | R$ 7.100 | R$ 7.100 | R$ 7.100 | R$ 7.800 | R$ 43.300 |
| Total geral | R$ 49.100 | R$ 49.100 | R$ 49.800 | R$ 51.300 | R$ 52.200 | R$ 53.500 | R$ 305.000 |
Combinação de cabeçalho e coluna fixos. Mantém o contexto de IDs e títulos durante o scroll horizontal e vertical.
| Modificador | Efeito |
|---|---|
| .is-stk-hdr | thead sticky no topo |
| .is-stk-col | primeira coluna sticky à esquerda |
| .is-stk-lst | última coluna sticky à direita (botoes de ação) |
| .is-stk-hdr + .is-stk-col | interseção recebe z-index: 4 automaticamente |
6. Row Status
Classes de status aplicadas no <tr>.
Usam color-mix() para overlay suave sem
sobrescrever a cor de background da linha.
| Pedido | Cliente | Valor | Status | tr class |
|---|---|---|---|---|
| #10401 | Maria Santos | R$ 1.240,00 | Selecionado | tr.is-act |
| #10402 | João Ferreira | R$ 890,00 | Aprovado | tr.is-suc |
| #10403 | Ana Rocha | R$ 3.200,00 | Cancelado | tr.is-per |
| #10404 | Carlos Lima | R$ 445,00 | Pendente pgto | tr.is-ale |
| #10405 | Paula Costa | R$ 2.100,00 | Em trânsito | tr.is-inf |
| #10406 | Rafa Moura | R$ 760,00 | Aguardando NF | tr.is-pnd |
| #10407 | Luana Dias | R$ 1.890,00 | Novo pedido | tr.is-new |
| #10408 | Marcos Silva | R$ 320,00 | Desativado | tr.is-mut |
| Pedidos do mês anterior | ||||
| #9998 | Sofia Alves | R$ 588,00 | Entregue | tr.is-grp (sep.)
|
Classes de status aplicadas diretamente na tag <tr>. O
framework aplica um overlay de cor suave.
7. Cell Helpers
Classes aplicadas em <td> ou <th> individualmente.
| Ativo | Preço | Variação | Volume | Mkt Cap | Sinal |
|---|---|---|---|---|---|
| AAPL | $ 189.42 | +2.4% | 48.2M | $ 2.91T | COMPRA |
| GOOGL | $ 178.84 | -0.8% | 22.1M | $ 2.22T | NEUTRO |
| MSFT | $ 420.10 | +0.1% | 18.7M | $ 3.12T | COMPRA |
| NVDA | - | Indisponível | - | - | - |
Modificadores de alinhamento e status aplicados individualmente em
<td> ou <th>.
| Classe (td/th) | Efeito |
|---|---|
| .is-num | Alinha à direita + fonte mono tabular |
| .is-ctr | Alinha ao centro |
| .is-rgt | Alinha à direita (sem mono) |
| .is-suc .is-per .is-ale .is-inf | Cor semântica + bold |
| .is-mut | Opacidade 40% (valor ausente/inativo) |
| .is-srt | Coluna ativa de ordenação - fundo suave |
| th[data-sort] | Ícone ? automático; "asc" ? ?; "desc" ? ? |
8. Skeleton Loading Framework
Adicione tr.is-ldg nas linhas enquanto o dado
carrega.
Animação shimmer automática. Zero JS.
| Cliente | Plano | MRR | Status | |
|---|---|---|---|---|
| Empresa Alpha Ltda | contato@alpha.com.br | Pro | R$ 499 | Ativo |
| - | - | - | - | - |
| - | - | - | - | - |
| - | - | - | - | - |
Placeholder animado (shimmer) para indicar carregamento assíncrono de dados.
9. Auto Counter CSS Framework
Adicione .is-cnt no wrapper para numerar
as linhas automaticamente via CSS counter().
Zero JS, zero coluna extra no HTML.
| Ranking | Desenvolvedora | App | Downloads |
|---|---|---|---|
| App Store | Meta | 2.1B | |
| App Store | TikTok Ltd | TikTok | 1.8B |
| App Store | WhatsApp LLC | 1.7B | |
| App Store | YouTube | 1.5B | |
| App Store | Telegram | Telegram | 900M |
Numeração automática de linhas via CSS counter, sem necessidade
de coluna de índice no HTML.
10. Larguras de Coluna
Use no elemento <col> dentro de
<colgroup> ou direto no <th>.
| ID | Nome completo | Cargo | Salário |
|---|---|---|---|
| 001 | Gabriela Monteiro de Albuquerque | CTO | R$ 28.000 |
| 002 | Pedro Henrique Costa Silva | Dev Sênior | R$ 18.000 |
| 003 | Laura Beatriz Fonseca | Designer | R$ 12.000 |
Controle preciso de larguras usando a tag <col> para
performance e organização das colunas.
| Classe | Largura | Uso típico |
|---|---|---|
| .col-fit | 1% + nowrap | IDs, checkboxes, ícones |
| .col-pp | 4rem | N. pequenos |
| .col-p | 8rem | Preço, data |
| .col-m | 14rem | Cargo, tipo, tag |
| .col-g | 20rem | Nome curto |
| .col-gg | 28rem | Nome longo, endereço |
| .col-fl | 100% | Coluna que ocupa o espaço restante |
| .col-hide-m | display:none @768px | Ocultar no mobile |
| .col-hide-p | display:none @576px | Ocultar em telas muito pequenas |
11. Combinações Reais
Exemplos de tabelas prontas para produção combinando múltiplos modificadores.
Dashboard financeiro - is-cnt + is-stk-hdr + is-hvr + is-bor + is-str
| # | Empresa | Setor | Receita | Crescim. | Risk | |
|---|---|---|---|---|---|---|
| - | Nubank | Fintech | R$ 11.8B | +62% | Baixo | |
| - | TOTVS | SaaS | R$ 4.2B | +24% | Baixo | |
| - | Méliuz | Fintech | R$ 620M | +4% | Médio | |
| - | GetNinjas | Marketplace | R$ 78M | -18% | Alto | |
| - | - | - | - | - | - | - |
| - | Total portfólio | R$ 16.7B | +36% média | |||
Demonstração de mix de utilitários: Sticky + Counter + Hover + Striped + Rounded.
Log de sistema - is-pp + is-str + is-cnt + is-bor
| # | Timestamp | Level | Mensagem | Serviço |
|---|---|---|---|---|
| - | 14:38:01.024 | INFO | Request completed successfully | api-gateway |
| - | 14:38:01.188 | DEBUG | Cache hit for key user:8821 | cache-svc |
| - | 14:38:02.340 | WARN | Slow query detected: SELECT * FROM orders WHERE... | db-pool |
| - | 14:38:03.001 | DEBUG | JWT token verified for user 8821 | auth-svc |
| - | 14:38:04.512 | ERROR | Connection refused: redis://cache:6379 | cache-svc |
| - | 14:38:04.900 | DEBUG | Retry attempt 1/3 for cache connection | cache-svc |
| - | 14:38:05.211 | INFO | Cache reconnected successfully | cache-svc |
| - | 14:38:06.044 | DEBUG | Webhook delivered to endpoint /hooks/stripe | webhook-svc |
Tabela de logs ultra-compacta com cabeçalho dark e colunas auto-ajustáveis.
12. Table Card Mode (Premium)
A variante .is-crd transforma a tabela em um painel
auto-contido.
Ela dispensa o .demo-wrap e aplica bordas, radius e
uma sombra (drop-shadow) macia nativamente na tabela, sendo a escolha perfeita para Dashboards
Enterprise de alto padrão.
| Fatura | Emissão | Cliente | Valor (R$) | Status | Ação |
|---|---|---|---|---|---|
| #80249 | 18 Nov 2026 | Tech Innovators Ltda | 14.500,00 | Pago | |
| #80250 | 19 Nov 2026 | Creative Studios | 3.240,00 | A Vencer | |
| #80251 | 20 Nov 2026 | Global Trading Corp | 89.100,00 | Atrasado | |
| #80252 | 21 Nov 2026 | Boutique Moderna | 950,00 | Processando |
O modo Card transforma a tabela em um painel auto-contido com bordas, radius e drop-shadow nativos.
13. Quick Reference
Wrapper .tbl
| Classe | O que faz |
|---|---|
| .tbl | Base + scroll + shadow |
| .is-row | Linhas horizontais (padrão) |
| .is-bor | Todas as bordas |
| .is-col | Só colunas |
| .is-cln | Sem bordas |
| .is-pp | Compacto |
| .is-p | Pequeno |
| .is-g | Espaçoso |
| .is-str | Striped |
| .is-hvr | Hover highlight |
| .is-rnd | Rounded corners |
| .is-crd | Card mode (sem wrapper) |
| .is-gls | Glass morphism |
| .is-grd | Gradient header |
| .is-stk-hdr | Sticky header |
| .is-stk-col | Sticky 1ª coluna |
| .is-stk-lst | Sticky última coluna |
| .is-cnt | Auto-counter CSS |
thead / tr / td
| Classe | Aplica em |
|---|---|
| thead.is-pri | Header primário |
| thead.is-sec | Header secundário |
| thead.is-drk | Header escuro |
| thead.is-lgt | Header claro |
| tr.is-act | Linha selecionada |
| tr.is-suc | Aprovado / sucesso |
| tr.is-per | Erro / cancelado |
| tr.is-ale | Alerta / pendente |
| tr.is-inf | Info / em trânsito |
| tr.is-pnd | Aguardando |
| tr.is-new | Novo registro |
| tr.is-mut | Desativado |
| tr.is-grp | Separador de grupo |
| tr.is-ldg | Skeleton loading |
| td.is-num | Número tabular mono |
| td.is-srt | Coluna ordenada |
| th[data-sort] | Ícone sort automático |