Uploaded image for project: 'Confluence Server and Data Center'
  1. Confluence Server and Data Center
  2. CONFSERVER-64375

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

    XMLWordPrintable

Details

    Description

      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

      Attachments

        1. Chrome.png
          Chrome.png
          43 kB
        2. Safari.png
          Safari.png
          257 kB

        Issue Links

          Activity

            People

              Unassigned Unassigned
              lwang3@atlassian.com Lei Wang
              Votes:
              5 Vote for this issue
              Watchers:
              9 Start watching this issue

              Dates

                Created:
                Updated: