Table added through ckeditor doesn't retains the style attribute

Question

I have integrated ckeditor in a web page which uses table plugin to allow users to create tables in the editor window. When the user exits the editor window and the result is shown on the page the table width sometimes gets much wider than the web page.

I have made changes so that the editor allows style tags like:

CKEDITOR.replace('editor', {
    extraAllowedContent: 'table{*}'
});

Also made this change to ckeditor's config.js for making default width of table as 100%:

CKEDITOR.on('dialogDefinition', function (ev) {
    var dialogName = ev.data.name;
    var dialogDefinition = ev.data.definition;
    if (dialogName == 'table') {
        var info = dialogDefinition.getContents('info');
        info.get('txtWidth')['default'] = '100%';  
    }
});

But I'm not able to set table-layout as fixed so that when the table is shown on web page the table is fixed in its 100% width on the web page.

Answer 1

If the table has width:100% when data is extracted from CKEditor (you can verify it via editor.getData method ), its width depends on the parent element width in which it is placed on the website. If the parent (direct or not) element has fixed width, the table should not expand beyond it.

See this codepen: https://codepen.io/f1ames/pen/ZaaRPy

Maybe you can share you html code or prepare some snippet showing the issue if above answer is not enough?