Hey Veronica,
The style system for Umbraco is quite restrictive on what styles you can apply via the style drop down picker. It typically only allows rules which are simple classes (eg .table-striped) or actual HTML elements (eg h1, h2, etc).

Fortunately though, the actual CSS files you include (which your styles belong to) can include generic CSS which will affect the TinyMCE editor without being applied.

What I recommend you do is apply the ".table-striped" style to your table via the dropdown list style picker or via the table properties then in your stylesheet you've included in the include the styles.

.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th {
  background-color: #f9f9f9;
}

This will mean the table in the TinyMCE will be styled as you expect via your advanced style rules.

I hope this helps,
Jamie

Whilst not automatic there is a quick way to get lots of styles into the styles dropdown..

config/tinymceconfig.config in the   <customConfig> tag add a node...

<config key="theme_umbraco_styles">;text-large=.text-large;float-image-right=.float-image-right;</config>

note the first ; is requried for some reason or other if you've not included any styles vai the backend interface.

I think this is the same in u7.. we've not made the leap from v4 as yet. actually might have seen that the key might not need the _umbraco now.. but you might have to experiment with that.

Thank you both.

I took Jamie's suggestion and is shown in the formats dropdown.  The only problem I have now is there doesn't seem to be an option to set the class on the table.  I've had a look at the tinymce table.htm file and see that there is supposed to be an advanced tab that is not showing on my installation.  Chrome is showing some javascript errors so I'll look into those first.

Thanks again

Ver

Hey Veronica,
It seems v7 doesn't have the advanced table properties that v6 or v4 have. Therefore the only way to add a class to a table would be via a macro or editing the source. The former being a tad more desirable than the latter. I don't think the macro approach is the right way to go though because that is more for dynamic content and lacks the flexibility of TinyMCE's table insert feature.

Using a style from the style dropdown seems to add it to the current table cell rather than the table itself. Adding the style dropdown would require modification of the TinyMCE table.htm dialog box, like you say.

I'm guessing you'd want to apply this styling only to table with this class? Otherwise you could apply it to all tables passively via the included stylesheet.

Thanks,
Jamie

other additions that may help...

<config key="theme_umbraco_path">true</config>
<config key="theme_umbraco_statusbar">true</config>
<config key="theme_umbraco_statusbar_location">bottom</config>

then when you have selected a tablecell.. you can use the path to chose the table tag to apply the style to.

I came across the same issue. I cant seem to add a style class to a table within tinymce - using umbraco 716.

Tried adding the textstyle (like other styles) but this doesnt work when table selected and seems to set to cell selected (at times) but there is no way to assign it to the table itself.

Have you found a solution or a workaround to this?

I too would like to give the editor to option to set class=table or class=table table-striped - at minimum.

Hi Mike

When I add the mentioned additions to tinymce.config (umbraco 71.6), nothing seems to help. no error in console.

<configkey="theme_umbraco_path">true</config>
<configkey="theme_umbraco_statusbar">true</config>
<configkey="theme_umbraco_statusbar_location">bottom</config>

is that supposed to show something of hml>table>td sort of path selector at the bottom of the tinymce editor?

I dont see anything, touched web.config, restarted the AppPool, cache to make sure.

Would you be able to clarify what did you see with the addition of these? And is there something else I should note of to make this path selector visible within RTE (umbraco v7)?

cheers

Hi Veronica

Have you figured out a way to enable the Advanced Properties tab or allow user to change the table class in the tinymce? Using 7.1.6

Unfortunately I had to concentrate on other non-umbraco projects for awhile and have just got back to this one. So no, I haven't figured it out yet,

Ver

Welcome back. Hopefully we will figure out a way to assign classes to tables..

is working on a reply...