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
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 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 do not 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, do not 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 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:
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 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 does not save your table changes or you see errors like 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 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 and , 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 for proper styling
Move any header rows from to 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 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 , , or 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



.ai-only {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}



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
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
or 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?



Open the article in the new article editor and select your table.

Click the top row of the table.

Select the Row dropdown menu.


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?


Edit the article in the new article editor.

Select the table header text that appears as H2.


Change the format to the correct style using the editor toolbar.


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?


Attempt to reproduce the issue in the editor.

Capture an HTTP Archive (HAR) file and a screen
recording of the behavior.


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


