Fixing Unwanted Scroll Bars and Styling Issues in Essential Addons Data Tables

Many users of the Essential Addons for Elementor plugin encounter a common issue: unwanted horizontal scroll bars appearing on their Data Tables, particularly in mobile views. This problem can make your tables look broken and harm the user experience on your site. This guide will explain why this happens and provide the most effective CSS solutions to fix it.

Why Does This Happen?

The Essential Addons Data Table widget is designed to be responsive. On mobile devices, it can automatically enable horizontal scrolling to prevent a wide table from breaking your site's layout. However, this behavior isn't always desired, especially for simpler tables that don't actually need to scroll. The scroll bar appears because the plugin's CSS applies an overflow property to the table container to handle potential overflow content.

Other common styling issues, like persistent borders or unwanted spacing, are often not caused by the plugin itself but by your active theme's CSS rules overriding or conflicting with the table's styles.

How to Remove the Unwanted Scroll Bar

The most reliable fix is to use custom CSS to override the plugin's mobile scrolling behavior. You can add the following code to your site, targeting screens smaller than 767px (a common mobile breakpoint).

Solution 1: Basic Scroll Removal

@media only screen and (max-width: 767px) {
  .eael-data-table-wrap table {
    overflow: hidden !important;
  }
}

Solution 2: Addressing Empty Headers

In some cases, an empty or hidden table header column might be forcing the table width, creating the need for a scroll bar. If the basic solution doesn't work, try also hiding the mobile header.

@media only screen and (max-width: 767px) {
  .eael-data-table-wrap table {
    overflow: hidden !important;
  }
  .eael-data-table .th-mobile-screen {
    display: none !important;
  }
}

Fixing Other Common Data Table Issues

Removing Unwanted Borders

If you've set borders to 'None' in the widget settings but they still appear, your theme is likely applying them. Use this CSS to remove them.

.eael-data-table thead tr th,
.eael-data-table tbody tr td {
    border: none !important;
}

Fixing Unwanted Paragraph Spacing

When using the 'Editor' cell type, WordPress wraps content in <p> tags, which often have bottom margins set by your theme. This can create uneven spacing compared to header cells. This CSS targets those paragraphs within the table.

.eael-data-table .eael-data-table-content p {
    margin-bottom: 0;
}

How to Apply This Custom CSS

1. In your WordPress dashboard, navigate to Appearance > Customize.
2. Click on Additional CSS.
3. Paste one of the code snippets from above into the CSS editor.
4. Publish your changes.

For a more targeted approach that won't affect other site elements, add a unique CSS class to your specific Data Table widget in its Advanced tab and prefix that class to the CSS rules (e.g., .my-unique-table .eael-data-table-wrap).

Important Note: Third-Party Plugin Conflicts

As seen in the sample threads, sometimes a styling issue is mistakenly attributed to Essential Addons when the table was actually created by a different plugin, like Royal Elementor Addons. Always double-check which plugin's widget you are using on the page before troubleshooting.

By using these targeted CSS solutions, you can quickly resolve the most common styling issues with the Data Table widget and ensure a clean, professional look on both desktop and mobile devices.