Build an Elementor Comparison Table That Works on Mobile

A comparison table that reads perfectly at 1440 pixels often collapses into a squashed grid of tiny text on a 390-pixel phone. Since many visitors compare plans on their phones, the mobile version deserves as much care as the desktop one. This guide explains three patterns for an Elementor comparison table that works on mobile, the accessibility trade-off of each, and how to build one with Elementor Free.

Why comparison tables break on phones

A three-plan table needs four columns: one for feature names and one per plan. At 390 pixels wide, minus page padding, each column gets well under 100 pixels, too narrow for a feature name like “Priority email support”. Browsers then wrap words onto many lines, shrink text, or push the table wider than the screen, which causes the whole page to scroll sideways.

Three mobile patterns

Pattern	Best for	Accessibility	Trade-off
Stacked cards	2–4 plans, under ~8 features	Good if each card uses a heading and a list	Harder to compare one feature across plans
Sticky first column, horizontal scroll	Many features or plans	Best: a real table keeps row/column relationships	Needs a visible scroll cue; the scroll area must be keyboard-focusable
One plan at a time	Long, detailed plans	Good with a labelled selector	Visitors can’t see two plans at once

Pattern 1: stacked cards

On desktop, plans sit side by side as columns. On phones, each plan becomes a full-width card: plan name as a heading, price, a list of included features, and a button. This is the easiest pattern to build in Elementor because containers stack naturally. Repeat the same features in the same order in every card so visitors can compare by scrolling.

Pattern 2: real table with a sticky feature column

Keep a real HTML table inside a wrapper that scrolls horizontally, and fix the first column with CSS so feature names stay visible. This preserves the table semantics screen readers rely on. Mark each column and row header with <th> and a scope, as the W3C tables tutorial explains, and make the scroll wrapper keyboard-focusable with a label.

<div class="compare-scroll" role="region" aria-label="Plan comparison" tabindex="0">
  <table>
    <thead>
      <tr><th scope="col">Feature</th><th scope="col">Starter</th><th scope="col">Pro</th></tr>
    </thead>
    <tbody>
      <tr><th scope="row">Projects</th><td>3</td><td>Unlimited</td></tr>
    </tbody>
  </table>
</div>

<style>
.compare-scroll { overflow-x: auto; }
.compare-scroll table { min-width: 560px; border-collapse: collapse; }
.compare-scroll th[scope="row"], .compare-scroll thead th:first-child {
  position: sticky; left: 0; background: #fff;
}
</style>

Replace the sample plan names and values with your own. In Elementor Free, place this markup in an HTML widget, or put the table in a Text Editor widget and add the CSS to your theme’s Additional CSS. Elementor Pro’s per-element Custom CSS is an alternative if you have Pro.

Pattern 3: one plan at a time

A row of buttons (Starter, Pro, Business) above a single plan panel. It suits long feature lists but needs a little JavaScript or Elementor’s Tabs widget. If you use tabs, check that the tab labels are buttons that can be reached with the keyboard and announce which plan is selected.

Build stacked comparison cards in Elementor Free

1. Add a container and set its direction to Row on desktop. Add one child container per plan.
2. In each plan container, add a Heading (plan name), a Heading or Text Editor (price), an Icon List (features) and a Button.
3. Keep features in the same order in every plan. Use the same icon for “included” and a clearly different one for “not included”, and write the words too: don’t rely on icons or colour alone.
4. Switch Elementor’s responsive mode to Mobile and set the parent container direction to Column. Give child containers 100% width.
5. Highlight the recommended plan with a border and a visible “Recommended” label, not colour alone.
6. Preview at tablet and mobile widths and check there’s no sideways page scroll.

If you’re starting from a pricing layout, the three-tier SaaS pricing section is a ready-made base. For the general approach to breakpoints, see responsive design in Elementor, and to check what Free can and can’t do, read Elementor Free vs Pro.

Accessibility checklist

• Tabular data uses a real table with header cells (scope="col" and scope="row").
• “Included” and “not included” are conveyed in text, not only with ticks, crosses or colour.
• Text contrast is at least 4.5:1 for body text.
• Scrollable areas are keyboard-focusable and labelled.
• Buttons describe their destination, for example “Choose Pro” rather than “Click here”.

FAQs

Does Elementor Free have a table widget?

Elementor Free doesn’t include a dedicated table widget. You can build tables with the HTML or Text Editor widgets, build card layouts with containers, or use a third-party add-on.

Should I hide the table on mobile and show something else?

Avoid maintaining two separate versions of the same data: they drift out of sync. Use one structure that adapts, such as stacked cards or a scrolling table.

How many plans should a comparison show?

Three is common because it fits desktop widths and keeps decisions simple. Beyond four, consider a scrolling table or a plan selector.

Are tick and cross icons enough?

Add text alongside them, such as “Included” or “Not included”, or visually hidden labels, so the meaning doesn’t depend on recognising an icon.