Table styling options in RTE Plugin

[NageshRaja]

Hey guys,

I have authored a table in source edit mode as seen below -

Notice how the cells are separated in this view and clearly distinguishable.
But when the page is rendered on authoring this is how it appears -

Notice how the table border, cell separator are all gone.

So got a bunch of questions here -

1. Do we have to add styles as part of the table in source edit ourselves?
2. If yes to #1, then can we simple add <style> to source edit?
3. Even the default table plugin in RTE seems to have this issue - Image 1 below shows how it appears on the authoring dialog with cell separators but then Image 2 shows how it appears without cell separators on the authoring page
   
   
   

Any help with respect to the styling options of the table in RTE plugin either for Source Edit mode or default plugin mode at /rtePlugins/table?

[arunpatidar]

Hi @NageshRaja 

It seems there is a custom CSS rule which is overriding the default CSS rule for the table.

You can add correct style to the RTE which load extra CSS in the RTE editor, you need to add that using externalStyleSheets property.

Or you can add extraClientlibs to dialog itself

[NageshRaja]

Hey @arunpatidar, I wasn't able to locate the custom CSS which would override the default CSS. The behavior is seen on vanilla instance too.We have added a custom clientlib to style as per our specifications for now. But there is scope of improvement in the styling here for the table plugin.

[Rohan_Garg · Accepted solution]

Hey @NageshRaja,
The default OOTB table plugin is not styled with visible borders or cell separators in the final view. In other words, if you expect the table to have outlines by default, additional styling is required.

To render cell separators or borders consistently you can do either of the below:

1.Add Custom Classes via the RTE Plugin Configuration: Enhance your custom text component’s configuration (using the rtePlugins and uiSettings nodes) so that custom classes are added to the table elements when they are generated.

2. Include Custom Client Library CSS: Add CSS rules in your client library that target these custom classes. This CSS should be loaded both in authoring and in the final view, ensuring the table always shows the desired borders and separators.

You can use @arunpatidar's suggested approach of externalStyleSheets or extraClientlibs for this.

Hope this helps!
Rohan Garg

[NageshRaja]

Hey @Rohan_Garg, if the table plugin is not styled with visible borders and cell separators natively then that's probably an improvement scope item but ideally they should not show this on the authoring dialog then - The style leads to some confusion as what you see on the dialog is not same to the authoring view. But thanks for the custom clientlibs suggestion - we have used the same route to address the design gaps.