How to Add a Vertical Scrollbar to an Elementor Table?

A long table can take over a whole page. A fixed height with a scrollbar keeps the table compact while every row stays available.

The Table Vertical Scrollbar option of the Table widget from The Plus Addons for Elementor gives the table a set height and adds a scrollbar inside it.

To check the complete feature overview documentation of The Plus Addons for Elementor Table widget, click here.

Requirement – This widget is a part of The Plus Addons for Elementor, make sure it’s installed & activated to enjoy all its powers.

Before You Start

• Edition: Free — this works in the free plugin; Pro is not needed.
• Widget to enable: Table, switched on under The Plus Addons > Widgets.

How to Add a Vertical Scrollbar

1. Add the Table widget to your page and fill in your table.
2. Open Extra Settings in the Content tab.
3. Turn on Table Vertical Scrollbar.
4. Set Height (px), for example 250. Use the device icon next to the label to set a different height for tablet and mobile.
5. Publish the page and scroll inside the table to test it.

On the page, the table is cut at that height and scrolls inside its own box:

How It Behaves

• The table box gets the height you set and a vertical scrollbar. Rows below that height are reached by scrolling inside the table.
• If you turn the option on and leave the height alone, the table is only 100 px high, so set a height.
• The scrollbar’s colours and width are in Style > Scroll Bar.

Limitations

• The search box and entries dropdown scroll away. With Table Searchable or Entry Filter Dropdown on, they sit inside the same scroll area, so they leave the view once the visitor scrolls down.
• The header row scrolls away with the rows; it does not stay fixed at the top.
• The height applies to the whole table box, whatever the number of rows, so a short table can leave empty space.

Troubleshooting

The table is tiny after turning the option on

Set Height (px). Without a value the box is 100 px high.

Visitors lose the search box

Use a larger height, or turn the scrollbar off and use Entry Filter Dropdown to shorten the table instead.

Related Docs

• Table widget settings overview
• Limit the number of rows in an Elementor table
• Make data tables mobile responsive