Estoy buscando una solución compatible principalmente con los navegadores Webkit (Chrome/Edge/Safari) que permita que las columnas de la tabla cambien el ancho real de estas columnas cuando la propiedad de cambio de tamaño se establece en un campo editable. Ahora esto es lo que he hecho hasta ahora.

Agregué los controladores de cambio de tamaño en la primera fila de las columnas agregando el siguiente CSS (.editortable es la clase para las tablas):

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

Esto muestra los controladores de cambio de tamaño en el campo editable, lo que permite cambiar la escala de las columnas de la tabla. Pero lo que no hace es establecer el nuevo ancho y alto en el HTML subyacente agregando un atributo de "ancho" y "alto" con los valores apropiados. ¿Cómo se puede hacer esto en javascript vainilla o JQuery?

Lo siento por mi inglés, no es mi idioma nativo. Espero que entiendan lo que estoy tratando de lograr aquí.

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

Aquí está el violín; https://jsfiddle.net/7trwxoug/