When you migrate from the legacy article editor to the new editor, you may see table style issues.

This article shows how to resolve common issues after you migrate to the new editor.

This article covers the following topics:

  • How to fix a table wrap in <figure> elements
  • How to fix table header and header level format issues
  • How to fix table format and alignment issues

How to fix a table wrap in <figure> elements

The new article editor uses <figure> tags to provide consistent styles and features for tables across different browsers and platforms. This behavior is part of the new editor's table plugin architecture. It can cause style issues, such as a restricted table height or unwanted format issues. This section explains why this happens and how to prevent or fix it.

Important: Back up your CSS and content before you make major changes.

The new article editor wraps tables in <figure class="table"> elements and may apply inline styles that override custom classes.

To fix this, restore your table styles:

  1. Update your CSS selectors to target the new markup:
    • figure.table table { /* your table styles */ }
    • figure.table th, figure.table td { /* cell styles */ }
  2. Use !important sparingly to override inline styles if needed
  3. Test your changes in a duplicate article before you apply them site-wide

To prevent or fix table wrap issues:

  • Review your help center CSS to ensure that <figure class="table"> elements do not have restrictive styles, such as max-height or overflow settings
  • If you see style issues, update your CSS to target <figure class="table"> as shown:
    figure.table {
    max-height: none;
    overflow: visible;
    }
  • If you migrate content, do not remove <figure> tags by hand. The new article editor may add them again when you edit content.
Note: This guidance is based on general product knowledge and is not explicitly present in the original tickets. The new article editor relies on <figure> wrappers by design for feature support and consistency. Use help center CSS customization to resolve style issues, not changes to the editor output HTML.

How to fix table header and header level format issues

Common format issues after migration:

  • Table headers may lose their background color or styles
  • Table header cells may convert incorrectly to H2 text
  • H2, H3 sizes may appear different due to changes in default or custom CSS
  • The editor may not save table changes as expected

To ensure that table headers display correctly after migration:

  1. In your help center theme, add CSS rules that target <thead> or <th> elements, for example:
    thead { background-color: #f5f5f5; }
    th { background-color: #f5f5f5; }
  2. Keep or update any existing <th> styles to maintain consistency

To set table headers in the new article editor:

  1. In the article, select your table, then click the top row
  2. From the Row dropdown, turn on the Header row option
    • If the header row option is missing, manually add <thead> and <th> elements in the HTML source, or check for available plugins or editor options in your new article editor setup

If H2 or H3 styles appear incorrect

Review and update header levels:

  1. Edit the article in the new article editor
  2. Select any table header text that the editor converted to H2
  3. Change its format to the correct style, such as a table header or normal text

Adjust header level sizes with CSS:

  1. Go to Knowledge admin > Customize design > Customize > Edit code > style.cssCustomize live theme.png
  2. Update the CSS to ensure that H2, H3, and similar styles match your desired sizes
  3. Use the Preview feature to check the final format before you click Publish

If the editor does not save your table changes or you see errors like no changes have been made:

  1. Try to reproduce the issue
  2. Capture an HTTP Archive (HAR) file and a screen capture
  3. Contact Zendesk Customer Support for further help

For more information, see the following articles:

  • Fixing table styling when transitioning to the new article editor
  • Adding and formatting tables in help center articles
Tip: If you have many articles to update, consider a batch script or a migration tool to standardize header levels and styles, and back up your articles every time before you make bulk changes. If your new article editor implementation lacks certain table features, check for available plugins or contact your platform admin for enhancements.

How to fix table format and alignment issues

Common issues after migration:

  • Custom table styles for width and borders do not apply as before
  • Inconsistent text size and cell space
  • Table classes and border styles changed during a migration
  • Header rows split between <thead> and <tbody>, which causes style inconsistencies
  • Text overflow and table border issues

To fix these issues:

  • Update your help center CSS to target table elements
    .article-body td, .article-body th {
    padding: 20px;
    font-size: 16px;
    }
  • Fix table alignment
    • Use the new article editor table alignment options. The new article editor may have fewer features than the legacy editor.
    • If tables center every time or alignment does not work, add or adjust CSS:
      .article-body table {
      margin-left: 0 !important;
      margin-right: auto !important;
      }
  • Manage table cell space and alignment
    • Remove unnecessary inline styles that set cell space so your theme CSS controls that property
    • Define the desired cell space in your theme CSS
  • Adjust table classes, borders, and headers
    • Update CSS rules for any new or changed table classes, for example, .nonItemList
    • Ensure that all header rows are inside <thead> for proper styling
    • Move any header rows from <tbody> to <thead> as needed
  • Table text escapes borders or does not wrap as expected, especially after you add a table border in the article editor
    • Use these help center theme CSS rules to ensure table cell text wraps correctly and stays within the table borders
      /* 1. Target the class name from your table tag */
      table.wysiwyg-table-resized {
      /* This tells the browser: "Do not look at the content to decide width.
      Look at the <col> widths (40%/60%) and obey them strictly." */
      table-layout: fixed;
      width: 100%;
      }

      /* 2. Target the cells to ensure wrapping happens */
      table.wysiwyg-table-resized td {
      /* Forces text to go to the next line when it hits the edge */
      white-space: normal;

      /* Breaks long words/URLs if they are too wide for the 60% column */
      overflow-wrap: break-word;
      word-wrap: break-word;

      /* Optional: Makes reading easier by aligning text to the top */
      vertical-align: top;
      }
  • Articles edited or migrated from earlier versions of Zendesk Guide may contain legacy formatting that conflicts with your current theme CSS. If fixes do not apply as expected, inspect the table’s HTML and remove extra formatting or attributes that may affect layout.
    • In the article editor, select the table and remove any specific width or style settings applied through the article editor table controls
    • If necessary, switch to the HTML view and delete width attributes or inline style tags from <table>, <tr>, or <td> elements
  • Test and verify changes
    • Preview affected articles in the new article editor to confirm the formatting
    • Repeat for each article with custom tables, as a manual review may be required
THIS SECTION IS AI CONTENT. DON'T EDIT OR DELETE.

Why does my table have restricted height? Why is there a figure tag around my table? Why are my table styles changing after migration?

The new article editor or knowledge base uses <figure> tags to ensure consistent styles across platforms. This plugin architecture can sometimes restrict table height or cause unwanted formatting. To fix this, update your help center CSS to target figure.table and set max-height to none and overflow to visible.

How do I fix table headers that lost their color? How do I restore table header background styles?

Table headers may lose background colors or styles during migration. You can restore these by adding CSS rules to your theme that target <thead> or <th> elements. For example, set a background-color in your style.css file to maintain visual consistency.

How do I enable a header row in a table? How do I set table headers in the new editor?

  1. Open the article in the new article editor and select your table.
  2. Click the top row of the table.
  3. Select the Row dropdown menu.
  4. Turn on the Header row option.

How do I change font size for table cells? How do I adjust table padding and text size?

You can standardize text size and cell spacing by updating your help center CSS. Target .article-body td and .article-body th to define specific font-size and padding values. This ensures your theme CSS controls the layout rather than inconsistent inline styles.

How do I fix text escaping table borders? How do I make table text wrap correctly? How do I prevent long URLs from breaking table layouts?

To force text to stay within borders, target your table class (such as table.wysiwyg-table-resized) in your CSS. Set table-layout to fixed and width to 100%. For the cells, set white-space to normal and overflow-wrap to break-word to ensure long strings or links wrap to the next line.

How do I align a table to the left? How do I stop tables from centering automatically?

If your table centers automatically, you can force left alignment using CSS. Add a rule for .article-body table that sets margin-left to 0 !important and margin-right to auto !important.

How do I fix table headers converted to H2? How do I change incorrect header levels in tables?

  1. Edit the article in the new article editor.
  2. Select the table header text that appears as H2.
  3. Change the format to the correct style using the editor toolbar.
  4. Navigate to Knowledge admin > Customize design > Customize > Edit code > style.css to adjust H2 or H3 sizes if needed.

What should I do if the editor does not save table changes? How do I report a table editor error?

  1. Attempt to reproduce the issue in the editor.
  2. Capture an HTTP Archive (HAR) file and a screen recording of the behavior.
  3. Contact Zendesk Customer Support or your Support team for technical assistance.

Can I remove figure tags from the HTML? Will deleting figure tags fix my table styling?

Do not remove <figure> tags manually. The new article editor relies on these wrappers for feature support and may add them back automatically when you edit content. Use help center CSS customization to resolve style issues instead of modifying the output HTML.

How can I update many articles at once? Is there a way to batch fix table styles?

If you need to update multiple articles, use a batch script or a migration tool to standardize styles and header levels. Always back up your CSS and article content before performing bulk changes or major theme edits.

Powered by Zendesk