Таблица HTML ведет себя непоследовательно, когда я настраиваю colspan, а затем отменяю его с помощью инструментов разработчика в браузере

Question

Вот краткое изложение кода, который имеет отношение к проблеме:

<table class="container-table100">
    <tr>
        <td class="wrap-table100">
        <table cellspacing="0" border="0">
        <colgroup width="278"></colgroup>
        <colgroup width="558"></colgroup>
        <colgroup width="119"></colgroup>
        <colgroup width="130"></colgroup>
        <tr class="row header">
          <th height="40"><b></b></th>
        </tr>
        <tr class="row">
          <td colspan="4">
            <table cellspacing="0" border="0">
              <colgroup width="278"></colgroup>
              <colgroup width="558"></colgroup>
              <colgroup width="119"></colgroup>
              <colgroup width="130"></colgroup>
              <tr class="row">
                <td></td>
                <td colspan="3"></td>
              </tr>
            </table>
          </td>
        </tr>
      </table>				
    </td>
  </tr>
</table>

Я ожидаю, что в строке заголовка должна быть одна ячейка шириной 278; в то же время в следующей строке уровня это должна быть объединенная ячейка шириной 1085 (сумма из 4 столбцов).

Когда я впервые запускаю код в Chrome, он не работает должным образом. Ячейка заголовка почти равна длине ячейки второй строки шириной 895 и 1033 соответственно.

Затем я начинаю регулировать colspan с 4 до 2 с помощью инструментов разработчика, ширину ячеек в две строки становятся 278 и 836. После того, как я изменил colspan обратно на 4, они становятся 278 и 1085, которые соответствуют моему ожидаемому результату, но не соответствуют тому, что появляется при первом запуске. Что является причиной этого? Есть ли ошибка в Chrome?

(colgroup s должны быть сгенерированы с помощью Javascript с фиксированной шириной, поэтому я не помещаю сумму непосредственно в код)