see the attached example

when clicking the button ("change column templates"), the new column headers get the correct widths, but the cells will simply get the same size each, totally unaligned to the column headers.

the cause is an empty colgroup in the actual scrollable part of the table
after the replacing the real headers
<colgroup id="aPDQ2-bdfaker"></colgroup>

clicking the second button ("change column templates with flex") will try to assign an hflex to 2 columns leading to client side JS errors (might be caused by the issue above)