Can anyone explain in simple terms how I would go about changing the default table width configuration to be 100% rather than 500px and for the base unit to be % rather than pixels.

I've done some reading up and found the table.js file, but can not see where to make the changes. I'm not a coder, so it is a bit of a struggle.

I ask this question, because so many of the sites I am building these days are responsive and percent widths make more sense. Explaining this to a client such that they understand is much less easy, so it would be good to set some workable defaults.

Thanks in anticipation


mkesicki’s picture

Please remember that change source code of CKEditor library is not the best idea. After change in core you will have to always remember to add your changes to necessary files after upgrade of CKEditor library.
I think that better way to achieve your goal is write small plugin to CKEditor which will change default value of table with.
Here are some links that should help you with this:

wwalc’s picture

Status: Active » Closed (fixed)

Just like Michal suggested, the first link to Howto should do the trick.

MrPaulDriver’s picture

Thank you both for your assistance with this.

With the help of your notes and with the info posted here I have managed to make and enable a plugin which I have called tablewidth.

The trouble is, ckeditor will not load, I just get empty space where ckeditor should be.

The code I am using is below...

  // Set defaults for tables
  CKEDITOR.on( 'dialogDefinition', function( ev )
     // Take the dialog name and its definition from the event
     // data.
     var dialogName =;
     var dialogDefinition =;

     // Check if the definition is from the dialog we're
     // interested on (the "Table" dialog).
     if ( dialogName == 'table' )
         // Get a reference to the "Table Info" tab.
         var infoTab = dialogDefinition.getContents( 'info' );
         txtWidth = infoTab.get( 'txtWidth' );
         txtWidth['default'] = 100;
         cmbWidthType = infoTab.get( 'cmbWidthType' );
         cmbWidthType['default'] = 'percents';
         txtCellPad = infoTab.get( 'txtCellPad' );
         txtCellPad['default'] = 1;

Is anybody able to offer some pointers about what I am doing wrong?

MrPaulDriver’s picture

I should say also, that Chrome console returns the following...

Uncaught TypeError: Cannot read property 'icons' of null

MrPaulDriver’s picture

Issue summary: View changes