Gerador de Tabelas Responsivas
Tabelas que viram cards empilhados no mobile, sem JavaScript.
| Produto | Categoria | Preço | Estoque |
|---|---|---|---|
| Teclado mecânico | Periféricos | R$ 349 | 12 |
| Monitor 27" | Vídeo | R$ 1.299 | 4 |
| Mouse sem fio | Periféricos | R$ 129 | 27 |
Propriedades CSS utilizadas
data-label + ::beforeCada célula guarda o nome da coluna em um atributo data-label; no modo mobile, um pseudo-elemento ::before exibe esse rótulo antes do valor, simulando os cabeçalhos que desapareceram.
display: block no modo mobileAo trocar table/tr/td para display: block, cada linha passa a empilhar verticalmente como um card, em vez de manter a grade tabular original.
Perguntas frequentes
Sim, apenas o atributo data-label precisa repetir o texto do cabeçalho em cada célula — é a única duplicação necessária, sem JavaScript.
Funciona bem até um número moderado de colunas; para tabelas com muitas colunas, considere também permitir rolagem horizontal como alternativa.
Sim, é possível duplicar o rótulo em um real dentro da célula, o que melhora a seleção de texto mas aumenta o HTML.
Ferramentas relacionadas
Gerador de CSS Grid
Crie grades com colunas, linhas, gap e áreas nomeadas com pré-visualização instantânea.
Gerador de Scrollbar Personalizada
Personalize cor, largura e cantos da barra de rolagem do navegador.
Gerador de Cards
Cards com sombra, borda, raio e espaçamento configuráveis para listagens e dashboards.