Principais conclusões
- Uma tabela responsiva ao Elementor usa um dos três padrões nos telefones: linhas empilhadas em cartões, um scroll lateral dentro da própria caixa da tabela ou menos colunas.
- Uma tabela de cinco colunas precisa de cerca de 640 px de largura para permanecer legível, e a maioria dos telefones mostra entre 360 px e 430 px, portanto, uma tabela ampla transborda, a menos que você escolha um padrão.
- O widget Tabela Dinâmica de complementos mestres empilha cada linha em um cartão em dispositivos de até 768 px de largura quando a Tabela Responsiva? está ligada, qual é o padrão.
- A rolagem horizontal leva duas regras CSS: overflow-x definido como automático em um wrapper e uma largura mínima na mesa dentro dele.
- O TablePress possui uma caixa de seleção de Rolagem Horizontal nas configurações de cada tabela, e está desligado por padrão.
Uma tabela responsiva ao Elementor é aquela que permanece legível em um telefone, e as tabelas não fazem isso por si mesmas As colunas precisam de mais largura do que um telefone, então a tabela geralmente sai do lado direito da tela.
Existem três maneiras de lidar com isso Nós construímos todos os três no Elementor 4.3 e verificamos em uma tela de telefone de 390 px de largura.
Índice
Por que as mesas quebram no celular
Uma tabela não pode envolver suas colunas da maneira que uma fileira de contêineres Elementor pode Cada coluna tem que se sentar ao lado das outras, e cada uma precisa de espaço para sua palavra mais longa Nossa mesa de transporte de cinco colunas é confortável em cerca de 640 px Em um telefone de 390 px o navegador aperta as colunas até que as palavras empilhem três linhas de profundidade, e então a última coluna cai da borda.
Os próprios controles responsivos do Elementor não ajudam muito aqui Você pode esconder um widget inteiro por dispositivo ou alterar sua largura, mas não pode alcançar dentro de uma mesa e reorganizar suas células.
Os três padrões de tabela responsivos
Cada padrão tem um custo.
| Padrão | O que o visitante vê | Melhor para | Custo |
|---|---|---|---|
| Empilhe linhas em cartões | Um cartão por linha, rótulos à esquerda | As linhas são lidas uma de cada vez: horários, folhas de especificações, listas de preços | Difícil comparar uma coluna entre linhas |
| Rolo horizontal | A mesa normal, deslizada lateralmente | Comparando valores em uma coluna | As colunas ficam escondidas até que o visitante deslize |
| Esconder colunas | Uma tabela mais curta com as colunas principais | Tabelas com uma ou duas colunas opcionais | Os visitantes do telefone perdem esses dados |
Padrão 1: Empilhe linhas em cartões
O empilhamento transforma cada linha em um pequeno cartão A linha do cabeçalho desaparece e cada célula mostra o nome da coluna como um rótulo Nada está oculto e ninguém rola lateralmente, portanto é o padrão mais seguro.
O Tabela Dinâmica widget faz isso com um switch.
- Selecione o widget Tabela Dinâmica no Elementor.
- Na guia Conteúdo, abra Configurações.
- Deixar Mesa Responsiva? definir como Sim. Está ligado por omissão.
- Abra a página em um telefone Linhas de pilha em dispositivos de até 768 px de largura.
A regra de empilhamento verifica a largura do dispositivo, portanto, encolher uma janela do navegador da área de trabalho não irá acioná-la Teste em um telefone real ou com emulação de dispositivo Se você definir grande preenchimento de células na guia Estilo, verifique se os rótulos e valores não ficam muito próximos no telefone.
Quer uma mesa que empilhe sem CSS? O Widget de tabela dinâmica tem a Tabela Responsiva ligada desde o início.
Padrão 2: Rolo horizontal
Rolo horizontal mantém a tabela como ela é e deixa o visitante deslizar de lado dentro de sua própria caixa A página em si não rola de lado Use-o quando as pessoas precisam ler uma coluna, como comparar preços.
Para uma tabela HTML no widget HTML do Elementor, envolva a tabela em um div e adicione duas regras:
<div class="table-scroll">
<table class="wide-table">
...
</table>
</div>
<style>
.table-scroll { overflow-x: auto; }
.table-scroll table { min-width: 640px; }
</style>O min-width impede o navegador de esmagar as colunas e overflow-x: auto adiciona o pergaminho somente quando a tela é mais estreita do que isso Altere 640 px para qualquer largura que sua mesa precise para permanecer em uma linha por célula.
A fraqueza é que nada diz ao visitante que há mais à direita Uma coluna que é cortada ao meio, como na captura de tela, é a melhor dica que você pode dar, então não defina a largura mínima para um valor que termina exatamente na borda de uma coluna.
Padrão 3: Ocultar colunas
Às vezes, uma coluna é agradável de ter em um desktop e desnecessário em um telefone Esconda-o abaixo de um ponto de interrupção e a tabela pode caber sem qualquer outra alteração.
Adicione uma classe a cada th e td nas colunas você pode perder e depois ocultar essa classe em telas pequenas:
<th class="hide-mobile">Delivery time</th>
...
<td class="hide-mobile">2 to 3 working days</td>
<style>
@media (max-width: 767px) {
.hide-cols .hide-mobile { display: none; }
}
</style>Here hide-cols is a class on the table itself. 767px is Elementor’s default mobile breakpoint, so the columns come back on tablets.
Only hide what a phone visitor can do without. If the hidden column decides whether someone buys, use stacking or scrolling.
TablePress de tabela responsiva tabelas no Elementor
A TablePress table placed in Elementor behaves like any other table: wide ones overflow. The fix lives in the TablePress settings.
- Ir para MesaPress and edit the table.
- Rolar para Table Features for Site Visitors.
- carrapato Rolagem Horizontal. It is off by default.
- Clique Salvar alterações.
In our test this fixed the overflow: the table scrolled inside its box and the page stayed still. TablePress also has stacking and collapsing modes for phones, and those are part of its paid Responsive Tables feature.
Uma lista de verificação móvel rápida
- Open the page on a real phone. Emulators miss touch scrolling and some device-width rules.
- Scroll the page sideways. If the whole page moves, the table is overflowing.
- Keep header text short. “Free over” wraps better than “Free delivery on orders over”.
- Put the most important column first. It is the one that stays visible when a table scrolls.
- Aim for 16px body text in cells. Shrinking the font to fit a table makes it unreadable.
Perguntas frequentes
How do I make a table responsive in Elementor?
Choose one of three patterns. Stack rows into cards with a table widget that supports it, such as Dynamic Table. Wrap an HTML table in a div with overflow-x set to auto so it scrolls sideways. Or hide optional columns below 767px with a CSS media query.
Why is my Elementor table cut off on mobile?
The table is wider than the screen and nothing tells it how to adapt. Tables cannot wrap columns, so the extra width spills past the edge. Add a scroll wrapper, turn on a stacking option in your table widget, or remove a column on small screens.
Can I make a table scroll horizontally in Elementor?
Yes. For an HTML table, put it inside a div with overflow-x: auto and give the table a min-width such as 640px. For a TablePress table, tick Horizontal Scrolling under Table Features for Site Visitors in that table’s settings.
Does Elementor have a responsive table widget?
Elementor has no table widget at all, in the core plugin or in Pro. Responsive tables in Elementor come from addon widgets, table plugins such as TablePress, or HTML tables with your own CSS.
Which is better on mobile, stacking or scrolling?
Stacking is better when each row stands alone, such as one class in a timetable. Scrolling is better when visitors compare numbers down a column, because stacked cards put those numbers far apart.
Pensamentos finais
To make an Elementor responsive table, decide what a phone visitor needs from it. Stack rows when each row is read alone, scroll when columns are compared, and hide columns only when the data is optional.
If you would rather not write CSS, Tabela Dinâmica handles the stacking pattern from a switch in the panel.
Leitura relacionada
