Uploaded image for project: 'Confluence Data Center'
  1. Confluence Data Center
  2. CONFSERVER-54275

Each column has same width in a wide table regardless of the contents on exported PDF

XMLWordPrintable

      Summary

      Thanks to the fix for CONFSERVER-34390, wide tables are not cut of in an exported PDF. However, each column has same width in the table regardless of the contents instead.

      We could also see the same behaviour in cases that we applied the workaround suggested in CONFSERVER-34390 to previous versions of Confluence.

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

      Steps to Reproduce

      1. Create a new page
      2. Create a table with at 15 columns (number of rows shouldn't matter)
      3. Paste a long string into one of the columns and short strings into the others
      4. Save the page
      5. Export to PDF

      Expected Results

      Each column width should be based on the contents.

      Actual Results

      Each column has same width regardless of the contents.

      • Table on browser
      • Table on the exported PDF

      Note

      CONFSERVER-34390 was avoidable by using a workaround.
      The eventual fix was to add the width: 98% !important; line when the column width is greater than 80 characters (and some code to look for this and test it) to the confluence-pdf-export-plugin

      master.css
      table.fixedTableLayout {
          table-layout: fixed;
          width: 98% !important;
      }
      

      This only affects tables that would otherwise go wider than the exported PDF page. Narrow tables are not affected by this. 
      Tables set as either Fixed or Responsive are affected.

      Workaround

      You can get tables to export better by setting the PDF CSS as

      table.fixedTableLayout {
      table-layout: auto !important;
      width: auto !important;
      }
      

      You can set this by Space or Globally.

      Space

      1. Go to Space Tools > Look and Feel
      2. Go to PDF Stylesheet
      3. Click Edit
      4. Add this CSS
        table.fixedTableLayout {
        table-layout: auto !important;
        width: auto !important;
        }
        
      1. Click Save

      Globally

      1. Go to > General Configuration > PDF Stylesheet
      2. Click Edit
      3. Add this CSS
        table.fixedTableLayout {
        table-layout: auto !important;
        width: auto !important;
        }
        
      1. Click Save

      View source and print as PDF

      1. Another workaround is to view the Page Source and print the page as PDF.
      2. The PDF will be what you see on the page.

        1. screenshot-1.png
          screenshot-1.png
          228 kB
        2. pdf_export_test.pdf
          4 kB
        3. screenshot-2.png
          screenshot-2.png
          174 kB
        4. test-confluence-5.9.12.pdf
          6 kB
        5. test-confluence-6.6.1.pdf
          7 kB
        6. snapshot.PNG
          snapshot.PNG
          40 kB
        7. view_source.PNG
          view_source.PNG
          17 kB

              mbereznitsky Mark Bereznitsky
              yokamoto Yuki Okamoto (Inactive)
              Votes:
              33 Vote for this issue
              Watchers:
              37 Start watching this issue

                Created:
                Updated:
                Resolved: