Почему ширина ячеек таблицы зависит от динамического содержимого другой внутренней таблицы в 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>