Skip to main content
MindTouch Success Center

Table custom styles

Applies to:
All MindTouch Versions
Role required:
Admin
There are multiple ways to style tables in MindTouch.

Add an HTML class attribute

This method uses Custom site CSS via the Control Panel. These styles will not be visible inside the editor until you save your page.

  1. Navigate to the page where you wish to add the table. Open the editor, click the "Table" drop down, and create your table.
  2. With your cursor inside the table, right click and select Table Properties.
  3. Enter a custom class name in the Stylesheet Classes input field. In this example, we used "mt-table" This will add a class attribute of the same name to the HTML <table> element
  4. Click OK to save the settings.
    tables 4.png
  5. You can now select this table using the class name to add  Custom site CSS and style the table.

How to add a custom inline style

To add a custom style to your editor, modify the editor configuration in the Control Panel. 

Add a style to the editor configuration

In the Control Panel go to "System Settings" > "Editor".  Add code to the text area labeled "Set editor configuration" and click the "Save Changes" buttonThe example below is for a style named Nice Table which selects <table> elements and adds a class attribute of mt-nice-table and a title attribute of Nice Table

CKEDITOR.editorConfig = function(config){
config.stylesSet.push({ name : 'Nice Table', element : 'table', attributes : { 'class' : 'mt-nice-table', 'title' :'Nice Table', 'style' : ''} });
};

Apply an inline style to your content

  1. Navigate to the page you wish to add the table to.
  2. Open the editor, click the Table drop down, and create your table.
  3. Without clicking outside your table, click the Styles drop down and select Nice Table from the list.
  4. Now you have a styled table.
  • Was this article helpful?