Nøgle takeaways
- En Elementor-responsiv tabel bruger et af tre mønstre på telefoner: rækker stablet i kort, en sidelæns rulle inde i bordets egen boks eller færre kolonner.
- En fem-søjle tabel har brug for omkring 640px af bredde for at forblive læsbar, og de fleste telefoner viser mellem 360px og 430px, så en bred tabel overløb, medmindre du vælger et mønster.
- Master Addons Dynamic Table-widgetten stabler hver række ind i et kort på enheder op til 768px bred, når Responsive Table? er tændt, hvilket er standarden.
- Vandret rulle tager to CSS-regler: overløb-x indstillet til auto på en indpakning og en min-bredde på bordet inde i den.
- TablePress har et afkrydsningsfelt for vandret rulning i hver tabels indstillinger, og det er som standard slået fra.
En Elementor responsive tabel er en, der forbliver læsbar på en telefon, og tabeller gør det ikke af sig selv. Kolonner har brug for mere bredde end en telefon har, så bordet normalt stikker ud af højre side af skærmen.
Der er tre måder at håndtere det på. Vi byggede alle tre på Elementor 4.3 og tjekkede dem på en 390px bred telefonskærm.
Indholdsfortegnelse
Hvorfor borde går i stykker på mobilen
En tabel kan ikke pakke sine kolonner på den måde, en række Elementor containere kan. Hver kolonne skal sidde ved siden af de andre, og hver enkelt har brug for plads til sit længste ord. Vores fem-kolonne forsendelsesbord er behageligt på omkring 640px. På en 390px telefon browseren klemmer kolonnerne, indtil ord stak tre linjer dybt, og så falder den sidste kolonne ud af kanten.
Elementors egne responsive kontroller hjælper ikke meget her. Du kan skjule en hel widget pr. enhed eller ændre dens bredde, men du kan ikke nå ind i en tabel og omarrangere dens celler.
De tre responsive bordmønstre
Hvert mønster har en omkostning.
| Mønster | Hvad den besøgende ser | Bedst til | Omkostning |
|---|---|---|---|
| Stak rækker ind i kort | Et kort pr. række, etiketter til venstre | Rækker læses en ad gangen: køreplaner, spec sheets, prislister | Svært at sammenligne én kolonne på tværs af rækker |
| Vandret rulle | Det normale bord, stryges sidelæns | Sammenligning af værdier ned i en kolonne | Søjler forbliver skjulte, indtil den besøgende stryger |
| Skjul kolonner | En kortere tabel med nøglekolonnerne | Tabeller med en eller to valgfrie kolonner | Telefonbesøgende mister disse data |
Mønster 1: Stak rækker ind i kort
Stabling gør hver række til et lille kort. Overskriftsrækken forsvinder, og hver celle viser sit kolonnenavn som en etiket. Intet er skjult, og ingen ruller sidelæns, så det er den sikreste standard.
de Dynamisk tabel widget gør dette med én switch.
- Vælg Dynamic Table-widgetten i Elementor.
- Åbn i fanen Indhold Indstillinger.
- forlade Responsivt bord? indstil til Ja. Den er slået til som standard.
- Åbn siden på en telefon. Rækker stack på enheder op til 768px bred.
Stacking reglen kontrollerer enhedens bredde, så krympning af et skrivebords browservindue vil ikke udløse det. Test på en rigtig telefon eller med enhedsemulering. Hvis du indstiller stor celle polstring i fanen Stil, skal du kontrollere, at etiketterne og værdierne ikke sidder for tæt sammen på telefonen.
Vil du have et bord, der stabler uden CSS? de Dynamisk tabel-widget har Responsive Table tændt fra starten.
Mønster 2: Vandret rulle
Vandret rulle holder tabellen som den er og lader den besøgende stryge den sidelæns inde i sin egen boks. Selve siden ruller ikke sidelæns. Brug den, når folk skal læse en kolonne ned, som f.eks. at sammenligne priser.
For en HTML-tabel i Elementors HTML-widget skal du pakke tabellen ind i en div og tilføje to regler:
<div class="table-scroll">
<table class="wide-table">
...
</table>
</div>
<style>
.table-scroll { overflow-x: auto; }
.table-scroll table { min-width: 640px; }
</style>de min-width stopper browseren i at knuse kolonnerne, og overflow-x: auto tilføjer kun rullen, når skærmen er smallere end det. Skift 640px til den bredde, dit bord har brug for for at forblive på én linje pr. celle.
Svagheden er, at intet fortæller den besøgende, at der er mere til højre. En kolonne, der er skåret i halve, som i skærmbilledet, er det bedste tip, du kan give, så indstil ikke min-bredden til en værdi, der slutter nøjagtigt ved en kolonnekant.
Mønster 3: Skjul kolonner
Nogle gange er en kolonne rart at have på et skrivebord og unødvendig på en telefon. Skjul den under et brudpunkt, og bordet kan passe uden nogen anden ændring.
Tilføj en klasse til hver th og td i kolonnerne kan du tabe, og skjul derefter den klasse på små skærme:
<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>Her hide-cols er en klasse på selve bordet. 767px er Elementors standard mobile breakpoint, så kolonnerne kommer tilbage på tablets.
Skjul kun, hvad en telefonbesøgende kan undvære. Hvis den skjulte kolonne bestemmer, om nogen køber, skal du bruge stabling eller rulning.
Responsive TablePress-tabeller i Elementor
En TablePress-tabel, der er placeret i Elementor, opfører sig som enhver anden tabel: brede overløb. Rettelsen lever i TablePress-indstillingerne.
- Gå til TablePress og rediger tabellen.
- Rul til Tabelfunktioner for webstedsbesøgende.
- mide Vandret rulning. Det er slukket som standard.
- Klik Gem ændringer.
I vores test fiksede dette overløbet: bordet rullede inde i sin boks, og siden forblev stille. TablePress har også stablings- og kollapstilstande til telefoner, og de er en del af dens betalte Responsive Tables-funktion.
En hurtig mobil tjekliste
- Åbn siden på en rigtig telefon. Emulatorer savner berøringsrulning og nogle regler for enhedsbredde.
- Rul siden sidelæns. Hvis hele siden bevæger sig, flyder tabellen over.
- Hold overskriftstekst kort. “Free over” ombrydes bedre end “Free delivery on orders over”.
- Sæt den vigtigste kolonne først. Det er den, der forbliver synlig, når en tabel ruller.
- Sigt efter 16px brødtekst i celler. Krympning af skrifttypen, så den passer til en tabel, gør den ulæselig.
Ofte stillede spørgsmål
Hvordan gør jeg et bord responsivt i Elementor?
Vælg et af tre mønstre. Stak rækker ind i kort med en tabel widget, der understøtter det, såsom Dynamisk tabel. Wrap en HTML-tabel i en div med overløb-x indstillet til auto, så det ruller sidelæns. Eller skjule valgfrie kolonner under 767px med en CSS medieforespørgsel.
Hvorfor er mit Elementor bord afskåret på mobilen?
Tabellen er bredere end skærmen, og intet fortæller den, hvordan den skal tilpasses. Tabeller kan ikke ombryde kolonner, så den ekstra bredde løber forbi kanten. Tilføj en rulleombryder, slå en stablingsindstilling til i din tabelwidget, eller fjern en kolonne på små skærme.
Kan jeg få et bord til at rulle vandret i Elementor?
Ja. For en HTML-tabel skal du sætte den inde i en div med overløb-x: auto og give tabellen en min-bredde som 640px. For en TablePress-tabel skal du sætte kryds ved Vandret rulning under Tabelfunktioner for Besøgende på webstedet i den pågældende tabels indstillinger.
Har Elementor en responsiv bordwidget?
Elementor har ingen tabel widget overhovedet, i kernen plugin eller i Pro. Responsive tabeller i Elementor kommer fra addon widgets, tabel plugins såsom TablePress, eller HTML tabeller med din egen CSS.
Hvad er bedst på mobil, stabling eller rulning?
Stabling er bedre, når hver række står alene, såsom en klasse i en tidsplan. Rulning er bedre, når besøgende sammenligner tal ned en kolonne, fordi stablede kort sætte disse tal langt fra hinanden.
Endelige tanker
For at lave en Elementor responsiv tabel, skal du beslutte, hvad en telefon besøgende har brug for fra den. Stak rækker, når hver række læses alene, rul når kolonner sammenlignes, og skjul kolonner kun, når dataene er valgfrie.
Hvis du helst ikke vil skrive CSS, Dynamisk tabel håndterer stablingsmønsteret fra en kontakt i panelet.
Relateret læsning
