Table styling options in RTE Plugin | Community
Skip to main content
NageshRaja
NageshRaja
March 6, 2025
Solved

Table styling options in RTE Plugin

  • March 6, 2025
  • 2 replies
  • 615 views

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?

 

Best answer by Rohan_Garg

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

2 replies

arunpatidar
Community Advisor
arunpatidarCommunity Advisor
Community Advisor
March 6, 2025

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

Arun Patidar
    NageshRaja
    NageshRajaAuthor
    March 11, 2025

    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
    Community Advisor
    Rohan_GargCommunity AdvisorAccepted solution
    Community Advisor
    March 9, 2025

    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
      NageshRajaAuthor
      March 11, 2025

      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.

      Terms & ConditionsAccessibility statement

      Loading footer...