Safari is unable to automatically add CSS classes to tables that are missing them

Problem

When the Confluence page has a table in it, Safari is unable to display it in preview or edit mode.

Steps to Reproduce

1. Create a test page in any Confluence space
2. Copy the below editor format to the page

   <p><br /></p>
   <table class="fixed-table wrapped">
   <thead>
   <tr>
   <th style="text-align: left;">AAA</th>
   <th style="text-align: left;">BBB</th>
   <th style="text-align: left;">CCC</th></tr></thead><colgroup> <col style="width: 86.0px;" /> <col style="width: 96.0px;" /> <col style="width: 113.0px;" /> </colgroup>
   <tbody>
   <tr>
   <td style="text-align: left;">xxx</td>
   <td style="text-align: left;">ALL</td>
   <td style="text-align: left;">asdasd</td></tr>
   <tr>
   <td colspan="1"><br /></td>
   <td colspan="1"><br /></td>
   <td colspan="1"><br /></td></tr>
   <tr>
   <td colspan="1"><br /></td>
   <td colspan="1"><br /></td>
   <td colspan="1"><br /></td></tr>
   <tr>
   <td colspan="1"><br /></td>
   <td colspan="1"><br /></td>
   <td colspan="1"><br /></td></tr>
   <tr>
   <td colspan="1">xxx</td>
   <td colspan="1">yyy</td>
   <td colspan="1">zzz</td></tr></tbody></table>
   <p class="auto-cursor-target"><br /></p>
   <p class="auto-cursor-target"><br /></p>
   

Expected Results

Table should be displayed

Actual Results

The table is disappeared from the page

Workaround

Using other supported browsers like Chrome and Firefox. Editing the page in Chrome will add Confluence's CSS classes into the table which also fixes its appearance in Safari.

Alternatively you can add the following to you global CSS stylesheet:

.confluenceTable.fixed-table { 
table-layout: auto; width: 100%; 
}

(reduce the percentage if you do not want the table to take up the whole width of the page)

You will also need to add the code in all Space stylesheet that you may have, as the space config overwrite the global stylesheet.

Note

Observed server resource load 404 error from Safari JS Console