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
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)