JSFiddle - React, Tailwind, and code Playground
HTML
<div contenteditable="true" class="js_wd_gen_ucclass idmrTinyMCE idmr-context-menu mce-content-body"><table border="5"><tbody><tr height="18"><td width="129"><br></td><td width="130"><br></td><td width="131"><br></td><td width="132"><br></td></tr><tr height="18"><td><br></td><td><br></td><td><br></td><td><br></td></tr><tr height="18"><td><br></td><td><br></td><td><br></td><td><br></td></tr></tbody></table></div>
CSS
div {
min-height: 65px;
width: 100%;
background-color: rgb(224, 224, 248);
}
table {
border-collapse: collapse;
}
JavaScript
$('.js_wd_gen_ucclass').live('focusout', function (){
$(this).find('table').each(function () {
var ele, actualWidth, totalWidth;
totalWidth = 0;
ele = $(this);
// Get the border width for the last table width operation
var border = parseInt(ele.attr("border"));
ele.find('tr:first td').each(function () {
// Get outerWidth instead of Width, so manage borders
var actualWidth = $(this).outerWidth();
$(this).attr("width", actualWidth);
// Compute sum of total width the cell and one border
totalWidth = totalWidth + actualWidth;
});
// Set Table width and add one border width
// Because 'number of border = number of cell + 1'
ele.attr("width", totalWidth + border);
});
});