Support » Plugin: TinyMCE Advanced » Unwanted inline styles added to tables

  • The latest version of this plugin (4.7.11 is adding inline styles to tables added via the Visual editor. (as also reported here: https://wordpress.org/support/topic/table-formatting-6/)

    For example, a two column table adds the following code:

    <table style="border-collapse: collapse; width: 100%;" border="1">
    <tbody>
    <tr>
    <td style="width: 50%;"></td>
    <td style="width: 50%;"></td>

    etc…

    This is quite a problem for me since I have created custom styles for different types of table displays for my client, but now the inline styles are overriding most of this custom CSS.

    How can I change this behavior? The only solution I have right now is to go in and manually remove the table and td styles, but this is tedious for me and causes trouble for my client who is not proficient working with code.

    I just want to be able to insert a clean, no styles table so that I can control the styling via CSS. For instance, I don’t always want my table to be 100% wide or have a border or for my cells to be of equal width, but now I no longer have control over these things with CSS. 🙁

    Hope someone can help!

Viewing 13 replies - 1 through 13 (of 13 total)
  • I agree. This is exceptionally annoying. I tried editing the raw HTML, removing all automatically inserted 50% widths on the TDs but somehow the widths were immediately added back in, albeit this time using fixed pixel measures. Pure h*ll!

    Other users are having this problem as well.
    https://wordpress.stackexchange.com/questions/239868/disable-tinymce-table-formatting-width-height

    Completely agree. The main reason I installed this plugin was the ability to easily and cleanly add tables. Now I need to teach 20+ users how remove inline styles. What a mess. Please stop “improving” things.

    Also happens with the latest version of the “MCE Table Buttons” plugin. According to the release notes TinyMCE has been updated from 4.1.x to 4.7.11. Maybe that’s what causes the problem.

    for insert a clean table (like this):

    <table>
    <tbody>
    <tr>
    <td></td>

    append PHP code into functions.php (in theme):

    function tinymce_fix_table_styles() {	
      echo '<script>jQuery(function($){
        if (typeof tinymce !== "undefined") {
          tinymce.overrideDefaults({
            table_default_attributes:{},
            table_default_styles:{}
          });
        }
      });</script>';
    }
    add_action('admin_footer', 'tinymce_fix_table_styles');

    so another defaults of tinymce table plugin 😉

    • This reply was modified 1 year, 3 months ago by jansudek.
    • This reply was modified 1 year, 3 months ago by jansudek.

    Thanks for the code. I added it to my functions.php file and it seems to have worked. I actually use the MCE Table Buttons plugin so it seems to be compatible with that plugin.

    Meh, hoped the new version wouldhave fixed this crap but nope..still the same shit.

    Have again to use an older version. Meh. What the hell are the devs thinking?

    Plugin Author Andrew Ozz

    (@azaozz)

    This seems to be a change upstream (in the TinyMCE editor project). Thinking (perhaps) adding something like the above snippet in the next version would be good.

    One would think the following would work :

    function mce_settings( $settings ) {
        $settings['table_default_styles'] = false;
        $settings['table_default_attributes'] = false;
        return $settings;
    }
    add_filter( 'tiny_mce_before_init', 'mce_settings' );

    Alas, we must resort to less elegant overrides.

    I really do hope that this issue will be fixed. It is not fixed even in the latest version. As soon as one column/row is removed, the script adds width/height to all table elements. It’s groundbreaking problem for me, so I’m stuck with 4.6.7 TinyMce advanced for now.

    Same problem here. I’ve tried every fix I’ve found but everytime I add a new column the problem is back.

    @jproy You need to downgrade to 4.6.7. This is the last version before this problem occurred.
    https://wordpress.org/plugins/tinymce-advanced/advanced/

    Hi, We recently noticed that when adding a column to an existing table the TinyMCE editor adds fixed widths to every cell in the table. We have a responsive site and this is not good for us. We have WordPress version 4.9.8 with the classic editor enabled (not using Gutenberg). We are using the TinyMCE plugin and the TinyMCE Config plugins.

    We have had some success by adding in the TinyMCE config:

    Option: invalid_styles
    Value: th: width height,td:width height

    and

    Option: table_clone_elements
    Value: tr

    Using the above, no widths and heights will be added to the tables. Also adding table_clone_elements allow adding of rows, but putting th or td there will cause a duplication of each column/row added so don’t do that.

    The problem we still have is that the HTML tag ‘scope’ of the table headers (<th>) is not being added when columns/rows are added to the existing tables. I tried adding ‘scope’ to the extended_valid_elements, and table_clone_elements but that did not work. Any help would be appreciated. We are trying to keep our site WCAG 2.0 compliant.

    meanwhile I added jquery in website code:
    $(‘td,th,table’).removeAttr(‘style’);
    $(‘td,th,table’).removeAttr(‘width’);

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘Unwanted inline styles added to tables’ is closed to new replies.