Troubleshooting issues with tables in the new article editor

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 elements

The new article editor uses 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 elements and may apply inline styles that override custom classes.

To fix this, restore your table styles

Update your CSS selectors to target the new markup:

figure.table table { /* your table styles */ }

figure.table th, figure.table td { /* cell styles */ }

Use !important sparingly to override inline styles if needed

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 elements don't have restrictive styles, such as max-height or overflow settings

If you see style issues, update your CSS to target as shown:
figure.table {
max-height: none;
overflow: visible;
}

If you migrate content, don't remove 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 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 formatting issues after migration

Table headers may lose their background color or styles

Table header cells may convert incorrectly to H2 text

H2 and 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

In your help center theme, add CSS rules that target or elements, for example:
thead { background-color: #f5f5f5; }
th { background-color: #f5f5f5; }

Keep or update any existing styles to maintain consistency

To set table headers in the new article editor

In the article, select your table, then click the top row

From the Row dropdown, turn on the Header row option

If the header row option is missing, manually add and elements in the HTML source, or check for available plugins or editor options in your new article editor setup

If H2 or H3 header styles appear incorrect

Review and update header levels

Edit the article in the new article editor

Select any table header text that the editor converted to H2

Change its format to the correct style, such as a table header or normal text

Adjust header level sizes with CSS

Go to Knowledge admin > Customize design > Customize > Edit code > style.css

Update the CSS to ensure that H2, H3, and similar styles match your desired sizes

Use the Preview feature to check the final format before you click Publish

If the editor doesn't save your table changes, or you see this error: No changes have been made

Try to reproduce the issue

Capture an HTTP Archive (HAR) file and a screen capture

Contact Zendesk Customer Support for further help

For more information, see:

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 don't apply as before

Inconsistent text size and cell space

Table classes and border styles changed during a migration

Header rows split between and , which causes style inconsistencies

Text overflow and table border issues

Steps to follow to fix table format and alignment issues

Update your help center CSS to target table elements
.article-body td, .article-body th {
padding: 20px;
font-size: 16px;
}

Fix table alignment by using 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 don't 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. For example, update CSS rules for any new or changed table classes, for example, .nonItemList

Ensure that all header rows are inside for proper styling

Move any header rows from to as needed

Table text escapes borders or don't 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 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 don't 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 , , or elements

Verify changes with the Preview of your article before you publish the article