How to set up and style the Comparison Table widget in Elementor.
Comparison Table lines up plans or products in columns and compares them row by row with yes, no and partial icons or your own text. It keeps the header in view on long tables, groups rows under headings that can collapse, and shows one plan at a time on phones. Use it under a pricing table or on a product comparison page.
Part of: Bright Addons Pro.
| Option | What it does |
|---|---|
| First Column Heading | The heading above the feature names. |
| Columns | The list of plans or products, one item per column. |
| Price or Subtitle | A line under the column title. |
| Badge | A small badge above the column title. |
| Highlight This Column | Marks the column as the highlighted one. |
| Button Link | The link of the column button, with Button Text above it. |
| Option | What it does |
|---|---|
| Rows | The list of feature rows and group headings. |
| Row Type | Chooses Feature or Group Heading. |
| Label | The feature name or the group heading text. |
| Small Text Under Label | A short description under the feature name. |
| Tooltip | Text shown from a question mark next to the feature name. |
| Values | One value per column, separated by /. |
| Highlight Row | Gives the row the highlighted row color. |
| Option | What it does |
|---|---|
| Buttons in Header | Shows each column button under its title. |
| Buttons Row at the Bottom | Repeats the buttons in a row below the table. |
| Sticky Header | Keeps the header row on screen while visitors scroll down. |
| Sticky Offset (px) | Leaves space above the sticky header for a sticky site header. |
| Sticky First Column | Keeps the feature names in view when the table scrolls sideways. |
| On Phones | Chooses one plan at a time with a picker, or sideways scrolling. |
| Collapsible Groups | Lets visitors open and close each group. |
| Groups Start | Starts with all groups open, only the first open, or all closed. |
| Highlight Column on Hover | Shades the column under the pointer. Highlight Row on Hover does the same for rows. |
| Yes Icon | The icon for yes values. No Icon and Partial Icon set the other two. |
One license gives you every Pro widget, all 10 extensions, the Theme Builder and priority support. From $16 a year, with a 14-day money-back guarantee.
These sections are in the Style tab.
first column width, plan column minimum width, background, border, radius, shadow, and line, stripe, hover and highlighted row colors.
background, padding, text styles for the first column and plan columns, icon size and color, and badge styling.
accent color, column and header backgrounds, header text color, and side border color and width.
typography and colors of labels and small text, column background and tooltip styling.
padding, value typography, color and alignment, icon size, and yes, no and partial colors.
typography, color, background and padding.
full button styling with hover states, plus a separate set for the highlighted column button.
label style, button typography, normal and active colors, padding and radius.
Type one value per column in the Values field, separated by |, for example: yes | no | partial. Any other text is shown as it is.
The remaining cells are left empty.
You can switch it on for several columns and each gets the highlighted style, but the phone picker starts on the first of them.
Yes. Each icon has hidden text that you can edit under Screen Reader Text in Settings.
Check the troubleshooting guide, or contact support with the page address and what you expected to happen.
Troubleshooting guide