Skip to main content
MindTouch Success Center

Table custom styles

There are multiple ways to style tables in MindTouch.

This method shows custom table styles within the MindTouch Editor. If you decide to use your own custom styles via the Control Panel, they will not be visible inside the editor until you save your page.

  1. Navigate to the page you wish to add the table to. 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 "mt-table" to the Stylesheet Classes input field. You have the option to add stylesheet classes to the First Row or the First column. Here we add the stylesheet class to the first row. Click OK to save the settings.
    tables 4.png
  4. Now you use a a custom styled 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 the following block of code to the text area labeled "Set editor configuration" and click the "Save Changes" button.

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

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?