<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
table {
border-collapse: separate;
}
td {
border: 1px solid #666;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
var callback = function(){
alert(tbl.rows[0].cells[0].offsetWidth+'/'+tbl.rows[0].cells[1].offsetWidth);
},
options = {
'childList': true,
'subtree': true
},
observer = new MutationObserver(callback),
tbl = document.querySelector('table');
observer.observe(tbl, options);
document.querySelector('button').onclick = function() {
tbl.rows[0].cells[0].innerHTML = 'aaaaaaaaaaa';
tbl.rows[0].cells[1].innerHTML = 'bbbbbbbbbbbbbbbbbbbb';
}
});
</script>
</head>
<body>
<table><tr><td></td><td></td></tr></table>
<button>Insert</button>
</body>
</html>