Fixed width tables aren't rendered correctly in Confluence pages when using Chrome 91

Issue Summary

Tables with fixed-width stopped rendering correctly after upgrading Chrome to version 91. It seems to be an update in the table rendering feature, according to the Chrome Release Notes.

Steps to Reproduce

1. Install Chrome 91.0.4472.77?
2. Access Confluence and create a page with the following storage format:

   <p class="auto-cursor-target"><br /></p><ac:structured-macro ac:name="section" ac:schema-version="1" ac:macro-id="2c29cccd-0fa7-406b-b443-30ac6a759834"><ac:rich-text-body>
   <p class="auto-cursor-target"><br /></p><ac:structured-macro ac:name="panel" ac:schema-version="1" ac:macro-id="b6d45086-f4d6-47be-9fed-ac1bb5473d6e"><ac:parameter ac:name="borderColor">#000099</ac:parameter><ac:parameter ac:name="borderWidth">4</ac:parameter><ac:rich-text-body>
   <h1 style="text-align: center;"><strong>Example</strong></h1>
   <div align="center">
   <p class="auto-cursor-target"><br /></p>
   <table class="wrapped fixed-table"><colgroup> <col style="width: 170.0px;" /> <col style="width: 170.0px;" /> <col style="width: 151.0px;" /> <col style="width: 152.0px;" /> </colgroup>
   <tbody>
   <tr>
   <td style="width: 56.1924%;" colspan="4">
   <div class="content-wrapper" style="text-align: center;">
   <p></p>
   <p><strong> Example Text 1 </strong></p></div></td></tr>
   <tr>
   <td style="text-align: center;width: 7.04875%;">
   <div class="content-wrapper">
   <p></p>
   <p><strong> Example Text 2 </strong></p></div></td>
   <td style="text-align: center;width: 10.2108%;">
   <div class="content-wrapper">
   <p></p>
   <p><strong> Example Text 3 </strong></p></div></td>
   <td style="text-align: center;width: 8.43215%;">
   <div class="content-wrapper">
   <p></p>
   <p><strong> Example Text 4 </strong></p></div></td>
   <td style="text-align: center;width: 6.917%;">
   <div class="content-wrapper">
   <p></p>
   <p><strong> Example Text 5 </strong></p></div></td></tr>
   <tr>
   <td style="text-align: center;width: 7.04875%;">
   <div class="content-wrapper">
   <p></p>
   <p><strong> Example Text 6 </strong></p></div></td>
   <td style="width: 10.2108%;text-align: center;">
   <div class="content-wrapper">
   <p></p>
   <p><strong> Example Text 7 </strong></p></div></td>
   <td style="width: 8.43215%;text-align: center;">
   <div class="content-wrapper">
   <p></p>
   <p><strong> Example Text 8 </strong></p></div></td>
   <td style="width: 6.917%;text-align: center;">
   <div class="content-wrapper">
   <p></p>
   <p><strong> Example Text 9 </strong></p></div></td></tr></tbody></table>
   <p class="auto-cursor-target"><br /></p></div></ac:rich-text-body></ac:structured-macro>
   <p class="auto-cursor-target"><br /></p></ac:rich-text-body></ac:structured-macro>
   

3. Save the Page

Expected Results

The page should be rendered as:

Actual Results

The page renders as:

This was a change introduced in Chrome 91:

Chrome uses updated table rendering

Chrome 91 updates the way it renders tables on web pages. This change fixes known issues and brings Chrome closer to the behavior of other browsers, so we expect the impact to be minimal. However, you should test important workflows in your environment for unexpected issues. A full explainer is available here.

Workaround

1. Open Chrome
2. Access the address chrome://flags
3. Search for the flag Enable TableNG
4. Disable it and re-launch Chrome

Workaround 2

1. Edit the page
2. Copy the table that isn't rendering correctly (it doesn't appear in the editor, but you can hove the mouse cursor over it)
3. Paste the table into any other place in the page. It should be rendered correctly.