Back to Community
Home / Community / Plugin → Advanced editor tools

How to Prevent and Remove Unwanted Inline Styles in Advanced Editor Tools Tables

22 threads Sep 16, 2025 Plugin → Advanced editor tools

Content

Many users of the Advanced Editor Tools plugin (formerly TinyMCE Advanced) encounter a common and frustrating issue: the editor automatically adds inline styles to tables. This behavior can override your theme's carefully crafted CSS, making tables look bad on both desktop and mobile views. If you've struggled with style="width: 50%;" attributes appearing in your table cells or unwanted borders, this guide is for you.

Why Does This Happen?

This behavior originates from the underlying TinyMCE editor library, not necessarily from the Advanced Editor Tools plugin itself. The TinyMCE table plugin is designed to help users visually create and resize tables directly in the editor. To do this, it applies inline styles (like widths and heights) to table elements so that what you see in the editor (WYSIWYG) closely matches the front-end display. While helpful for some, this feature is often unwanted by users who prefer to control all table styling through their theme's CSS.

Common Solutions to Disable or Remove Inline Styles

1. Using a Custom Filter (Code Solution)

The most effective way to prevent the editor from adding certain inline styles is to use the tiny_mce_before_init filter in WordPress. This method tells the editor to treat specific styles as "invalid," preventing them from being added or retained.

Add the following code to your theme's functions.php file, preferably within a child theme to prevent loss during updates:

function tiny_mce_table_options( $initArray ) {
    $initArray['invalid_styles'] = '{
        "table": "height",
        "tr": "width height",
        "th": "width height",
        "td": "width height"
    }';

    return $initArray;
}
add_filter( 'tiny_mce_before_init', 'tiny_mce_table_options' );

What this does: This code specifically targets the table, row, and cell elements (<table>, <tr>, <th>, <td>). It declares the width and height styles as invalid for these elements. As a result, the TinyMCE editor will strip these attributes out and will not add new ones when you interact with the table.

2. Manually Clean Existing Tables

For tables that already have inline styles, you can clean them up manually:

  1. In the WordPress editor, click on the table.
  2. Switch from the "Visual" tab to the "Text" (or HTML) tab.
  3. Locate and delete all style="..." attributes from the <table>, <tr>, <th>, and <td> tags.
  4. Switch back to the Visual tab to continue editing.

Pro Tip: For large tables, copy the entire HTML code into a plain text editor like Notepad++ and use its Find and Replace function to quickly remove all instances of style=" and their corresponding closing quotes and values.

3. Adjust Plugin Settings

The Advanced Editor Tools settings page offers an option to simplify the table properties dialog, which can help prevent users from accidentally applying advanced styles.

  1. Go to Settings > Advanced Editor Tools in your WordPress admin.
  2. Uncheck the option labeled "Show the advanced tabs in the table properties dialogs".
  3. Click "Save Changes".

This will hide options for setting border colors, background colors, and other advanced styling from the table properties popup, reducing the chance of inline styles being added.

Important Notes and Considerations

  • Plugin Conflicts: Some users have reported that certain plugins, like newer versions of Yoast SEO, can cause the table row and column options to be grayed out. If you experience this, try temporarily disabling other plugins to identify a conflict.
  • Pasting Tables: Be cautious when copying and pasting tables from external sources like Microsoft Excel or Google Sheets. These applications often include a large amount of extra HTML attributes and inline styles (e.g., data-sheets-*). Pasting directly into the 'Text' view and cleaning the code first is recommended.
  • Theme Styling: To ensure your tables look correct in the editor after removing inline styles, you may need to add custom CSS to your theme's editor-style.css file. This will style tables within the WordPress editor to match your front-end theme.

By understanding why these inline styles are added and using the solutions above, you can regain full control over your table's appearance and ensure they are responsive and styled by your theme's CSS.

Related Support Threads Support