TinyMCE Tables using attributes and not css properties for styling cellpadding, cellspacing etc

[piercy]

Do you want to request a feature or report a bug?
Bug / Not conforming to standards / html5 spec

What is the current behavior?
The current behaviour uses attributes for table styling rather that css styles.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via fiddle.tinymce.com or similar.

1. Go to https://www.tinymce.com/docs/demo/full-featured/
2. Insert a 2x2 Table
3. Click table properties
4. Add cellpadding of 5 then hit OK
5. Click tools and view source
6. You'll see that the table now has an attribute of cellpadding="5" rather than style="padding: 5px"

What is the expected behavior?
The expected behaviour is a table that has a style attribute with css padding applied NOT an attribute.

Which versions of TinyMCE, and which browser / OS are affected by this issue? Did this work in previous versions of TinyMCE?
Latest version and chrome, likely all browsers though as its simply using deprecated attributes. No idea if it worked in previous, this ticket has been opened and closed many times by you guys saying it isnt a problem, but it clearly is.

Thanks,
Michael

[metricjs]

Replicated on Win7 Firefox on the Full Featured demo page and the QA test page.

[mhaddon]

Can confirm this is a problem, the deprecated attributes cause compatibility problems with websites that have css that can override the attributes. Furthermore these attributes do not seem to work correctly in modern browsers regardless.

They are deprecated, please update the tool to support the newer standards.

[jayarjo]

While cellspacing can be replaced by css, there is no clean way to imitate cellpadding in a compact and clean way. We will have to add inline styles to each cell. This will obviously mess up the source code and slow down table processing (since for every modification of the cellpadding value we will have to update all cells).

Neither cellspacing nor cellpadding attributes are required. They are not added to the table, unless user explicitly decides to do so. So simply do not add them. What you can do instead is assign custom class to the table and style it from global stylesheets.

Also check content_css option.

[mhaddon]

@jayarjo if they are wontfix, then is there a way to remove the options so people are not playing with broken features?

[piercy]

@jayarjo every few months i get another ticket for this from our customers. Currently there is a broken feature in tiny mce. is there any plans to remove this broken feature rather than leaving it as an option that just doesnt work?

I understand fixing the option is out of scope / not possible. But having a broken feature just means people reporting it as broken continuously.

[Shawson]

+1 on this issue- we have users setting cellpadding and spacing which is immediately blasted over by any other css which the content is rendered in. Be great to be able to remove these options altogether.

[NicolasCast]

Same problem here;

The problem also extends to "cellspacing".
However, cellspacing may perhaps be fixed by using, in the table's style :
border-collapse: separate; border-spacing: 5px;

All of these appear to the user on the "basic" table property form.
If the problem cannot be fixed (I understand the reasons), it would help to have the "edit cell padding" and "edit cell spacing" features removed from the table property form, on the user side.

NOTE for pple running into this problem :
Setting the option
table_appearance_options
to false drops the "pacing" and "padding" from the properties' form.

Suggestion : this option may turned off by default.

[averkoff]

You can use this rule in the scss file, it will overload the padding value:

@for $i from 0 through 50{
        table[cellpadding="#{$i}"]{
            td,th{
                padding: 0px + $i;
            }
        }
    }

[metricjs]

To everyone, does setting table_style_by_css to true solve your use cases? If not, could you please tell me what else is needed? I've been looking into updating the table plugin for TinyMCE 5, and would appreciate the feedback.

This option isn't in the TinyMCE 4 docs, but it will work in TinyMCE 4 I believe. If you would like to see docs for it, you can find them under the TinyMCE 5 docs: https://www.tiny.cloud/docs-beta/plugins/table/#table_style_by_css

[averkoff]

In my case, version 4.8.5 is used and the setting table_style_by_css unfortunately does not work

[aschojz]

@metricjs table_style_by_css almost solves the problems mentioned above. In my usecase it's not working for cellspacing/border-spacing cause as the default css border-collapse: collapse is set. If I remove the default then I can't get collapsed borders. So it's for now an either or ...

[lostkeys]

@aschojz why can't you get collapsed borders if you remove the default css? Tell us more about your use-case maybe we could find a solution.

[aschojz]

okay, I try to clearify it :)
I init tinymce with

table_default_styles: { 'width': '100%' }, 
table_style_by_css: true

my table config

border: 1px, 
cellspacing: 5px, 
cellpadding: 5px

the output custom style on the table:

width: 100%;
border-spacing: 5px;
border-width: 1px;

so far so good and as expected. Now I want no cellspacing:

border: 1px, 
cellspacing: 0, or cellspacing: 'empty' 
cellpadding: 5px

the custom output style on the table:

width: 100%;
border-width: 1px;

here is imo border-collapse: collapse missing or did I misunderstand something?

[lostkeys]

Alright, I follow you along all the way down to the border-collapse: collapse but I lost you there.
Do you want border-collapse: collapse when cell-spacing is zero/empty?

[aschojz]

yes, that would be my desired behaviour.

[lostkeys]

AFAIK that has never been possible with TinyMCE. But, you could achieve it using some clever CSS though. You can use the attribute selector to check for the border-spacing property and if it's not there, or is zero, toggle border-collapse.

Here is an example: http://fiddle.tinymce.com/Xhhaab/1. Add a table and it will be collapsed by default. Then open up the table properties dialog and add cell spacing. I've only tested this in Safari though...

[aschojz]

thanks, works like a charm!

[Pooja05Upadhyay]

To everyone, does setting table_style_by_css to true solve your use cases? If not, could you please tell me what else is needed? I've been looking into updating the table plugin for TinyMCE 5, and would appreciate the feedback.

This option isn't in the TinyMCE 4 docs, but it will work in TinyMCE 4 I believe. If you would like to see docs for it, you can find them under the TinyMCE 5 docs: https://www.tiny.cloud/docs-beta/plugins/table/#table_style_by_css
@metricjs
I am facing a different issue when I have given table_style_by_css: true you can reproduce the issue by following steps

1. Set table_style_by_css: true
2. Try to set table properties like border colour (suppose red) getting applied on cells border as well in form of inline style
3. Now try to change the the colour ( suppose it's green) for cells border, using cell properties advanced tab option
4. Now again open the table properties advanced tab and change the border colour ( suppose blue this
   time), now you can observe that your cells border which you have given as green previously now set to blue.

this is because when we try to apply the style to table only using table properties advanced tab but it is automatically getting applied to cells as well via inline styling and you can open the cell properties advanced tab and observe that there is already of prefilled values similar to table properties.

[mrdivyansh]

It looks like this is not an issue with v7.