CKEditor Table Width and Column Width Units

Question

I am currently testing CKEditor.

Especially the features of the table resize and table plugin.

What I found out so far is that it seems to work sometimes with pt and sometimes with px.

Is there a way I can change the behaviour to work always with percentage or some other kind of relative ratio instead of px or pt for column width?

<table border="1" cellpadding="1" cellspacing="1" style="width:1340px">
    <thead>
        <tr>
            <th scope="col" style="width:386px">1</th>
            <th scope="col" style="width:953px">
            <p>2</p>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td style="width:386px">3</td>
            <td style="width:953px">4</td>
        </tr>
    </tbody>
</table>

My original post was on http://ckeditor.com/forums/CKEditor/CKEditor-Table-Width-and-Column-Width-Units. I decided to post it here because there was no activity on my question for two days.

I am looking for an easy way to adapt the table plugin in CKEditor either by configuration or programmatically via JavaScript to change the units from px e.g. to percentage or any other relative unit.

Update

What I want is that the users sees in WYSIWYG a table is for example 100% width while editing. When the user changes the column witdth they get changed in percentage and not in pixels. Or the user makes the table smaller than 100 % total width. Then the table gets changed in % not px.

pschueller pschueller · Accepted Answer · 2015-03-13T11:56:21

There does not appear to be a configuration setting to change this behavior, and editing the plugin itself is probably a bit of a headache.

You could simply give your table a percentage width and leave the rest as is. Most modern browsers will treat/resize the cells in proportion. You could force this with jquery, or even with a simple CSS declaration. For example: $("table").width("100%");, or table { width: 100% !important; }.

Alternatively, you can use jquery to grab the current widths and change them to percentages, so for example something similar to this:

var tableWidth = $("table").width();
$("table tr").children().each(function( index ) {
    $(this).width(Math.round(100 * $(this).width() / tableWidth)+"%");
});

$("table").width("100%");

var tableWidth = $("table").width();
$("table tr").children().each(function( index ) {
    $(this).width(Math.round(100 * $(this).width() / tableWidth)+"%");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" cellpadding="1" cellspacing="1" style="width:1340px">
    <thead>
        <tr>
            <th scope="col" style="width:386px">1</th>
            <th scope="col" style="width:953px">
            <p>2</p>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td style="width:386px">3</td>
            <td style="width:953px">4</td>
        </tr>
    </tbody>
</table>

For some information on how you might add this using class names to specifically target CKEditor tables, see: https://stackoverflow.com/a/7980775/2126792

CKEditor Table Width and Column Width Units

1 Answers