I'm looking for a solution primarily supported by Webkit browsers (Chrome / Edge / Safari) that allows table columns to change the actual width of these columns when the resize property is set in a contenteditable field. Now here's what I've done so far.

I've added the resize handles in the first row of the columns by adding the following CSS (.editortable is the class for the tables) :

.editortable tr:first-child td {
    padding: 4px;
    cursor:pointer;
    resize:both;
    border: 1px dotted #333;
    overflow:auto;
}

This shows the resize handles in the contenteditable field, allowing for rescaling the table columns. But what it doesn't do, is set the new width and height in the underlying HTML by adding a "width" and "height" attribute with the appropriate values. How can this be done in either vanilla javascript or JQuery?

Sorry for my English, it's not my native language. I hope you guys understand what I'm trying to accomplish here.

<div contenteditable="true">
    <table class="editortable">
      <tr>
         <td>1</td><td>Just some text</td>
      </tr>
    </table>
</div>

Here's the fiddle; https://jsfiddle.net/7trwxoug/