Skip to main content

Enable scrolling for large tables (TCS)

Written by Benjamin Ratajesak
Customer Success Agent II at MindTouch
This page applies to:MindTouch 4 and MindTouch TCS


Tables are an excellent way to display large amounts of data similar to Microsoft Excel. But large tables may not display properly (as in the example below) without a bit of additional code:


In the above example, the table on the page is cut off at column g with no way to view the data in columns h through r. Follow the steps below to create a custom style in the MindTouch Editor to enable left and right scrolling to view the entire table:

  1. In the Control Panel, under System Settings, click Editor


  1. Enter the following lines of code into the text box and click Save Changes:

CKEDITOR.editorConfig = function( config )

config.stylesSet.push({ name : 'Large Tables', element : 'div', wrap:true, attributes : { 'class' : 'largetable', 'style' : 'overflow: auto;' } });

  1. Return to the page and open it in Edit mode.
  2. Highlight the table, select the new Large Tables custom style from the Custom Styles drop-down list, and click Save.

Screen Shot 2014-09-19 at 11.13.10 AM.png

  1. You are now able to scroll left and right to view all data in the table.  


Additional Notes

The same can be achieved through CSS directly through Source mode in the Editor by wrapping the table in a div with the following CSS:

.largetable { overflow: auto; }

If your table is tall and you want the table to scroll up and down, just add a height to the CSS:

.largetable { height: the maximum height you want visable }
  • Was this article helpful?