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 styling 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. Customizing your help center CSS is the recommended approach to resolve style issues, rather than attempts to change 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 your theme
  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 always back up your articles 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

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
  • 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

For more information, see Transitioning to the new article editor

Powered by Zendesk