Comparison Table (Divi)

Compare plans or WooCommerce products side by side in Divi 5. Plans are Plan items (name, prices, badge, button, colours); features are typed in Divi’s table editor — one column per plan, a row with only its first cell is a section heading. Each section below names the settings that make it; resize the window to see tabs, cards and sideways scrolling.

1. Plans with every tool

Billing switch (with a saving tag), feature search, difference switch, collapsible sections with “Expand all”, sticky header, row tooltips and small text, bars, tags, stars, a highlighted row and a struck-through price. Tablets scroll sideways; phones show one plan at a time with plan tabs.

2. Products — separated columns

Skin: Separated columns with a 20 px gap. Each plan has an image (Media → Image), a top-edge badge and a coloured accent of its own. Column hover highlight; tablets show three plan cards per row, phones one.

3. Four skins

Layout & Responsive → Skin and Lines, Ticks → Icon Shape. The same plans in each.

Classic table

Skin: Classic table; lines: rows; icon shape: circle.

Separated columns

Skin: Separated columns; lines: rows; icon shape: square.

Bordered grid

Skin: Bordered grid; lines: grid; icon shape: plain.

Minimal

Skin: Minimal; lines: none; icon shape: circle; striped rows.

4. A header colour per plan

Each Plan’s Column Style: header background, header text colour, accent and a tinted cell background. Filled header off, outline off — the colours do the work.

5. Versus — icons, words beside the marks

Two plans, Media → Icon (Font Awesome rocket and building), “Show the Word Next to the Icon” with custom words, rounded-square marks, and plan cards on phones.

6. Five laptops — column picker and sideways scroll

Column Picker, row-and-column hover, a corner-ribbon badge, “Studio” hidden on phones (Plan → Hide On), the label column pinned while the table scrolls sideways on tablets and phones (scroll width 900 px).

7. WooCommerce products as columns

Source: WooCommerce products (IDs 23, 84, 41). Rows: price, rating, stock, SKU, categories, a “Details” section with the size and brand attributes, short description and an add-to-cart row. AJAX add to cart in the footer.

8. Rich cells

Images from the Media Library ({img:61}), 10-point stars ({stars:9.1/10}), coloured bars ({bar:75 #f59e0b}), coloured tags, buttons inside cells, and cell tooltips ([[One way only]]). Buttons at the bottom are off.

9. Dark trading desk

Minimal skin on a dark surface, cyan accent, “Highlight rows that differ” switched on by default, sticky header, label and value fonts from the Design tab.

10. Styled with the Design tab

Header background and padding, Georgia plan names, bold 34 px prices, pill-shaped buttons with a shadow, uppercase labels, a rounded shadowed table box, plan name tag H3.