为什么表格单元格的宽度取决于Chrome 69中另一个内部表格的动态内容？

Question

我注意到Chrome中表格单元格宽度的奇怪行为。

例如，我们有一个具有2列2行的表，但是1个单元格将具有colspan="2"并包含具有某些内容的内部表。

因此，内部表格的内容会影响顶部表格单元格的宽度。

JSFiddle：http://jsfiddle.net/Lzro9p6b/2/

let maxChars = 20;
let str = 'z';
setDynamicContent(str);

setInterval(function() {
	if (str.length >= maxChars)
  	str = '';
  str += 'zz';
  
  setDynamicContent(str);
}, 1000);

function setDynamicContent(value) {
	Array.from(document.getElementsByClassName('dynamic')).forEach(function(el){
  	el.innerHTML = value;
  });
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  text-align: left;
}

td[colspan="2"] {
  width: 100%;
}

.left-interesting-cell {
  background: #faa;
}

.right-interesting-cell {
  width: 100%;
  background: #aaf;
}

.inner-table td {
  width: 50%;
}

<h1>Why <code>left</code> and <code>right</code> cells are depends on dynamic content in Chrome 69?</h1>

<table>
  <tbody>
    <tr>
      <td colspan="2">
        <table class="inner-table">
          <tbody>
            <tr>
              <td>Some dynamic content:</td>
              <td class="dynamic"></td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
    <tr>
      <td class="left-interesting-cell">left</td>
      <td class="right-interesting-cell">right</td>
    </tr>
  </tbody>
</table>