Troubleshooting issues with tables in the new article editor

<p>When you migrate from the legacy article editor to the new editor, you may see table style issues.</p><p>This article shows how to resolve common issues after you migrate to the new editor and covers the following topics:</p><div style="margin-bottom: 20px; text-align: right;">
<button id="master-toggle" class="btn fw-semibold text-dark" data-action="expand" style="background-color: #DEF991; border: none; outline: none; border-radius: 7px; padding: 10px 20px; font-size: 15px; transition: background-color 0.2s ease;" onmouseover="this.style.backgroundColor='#cbef6d'" onmouseout="this.style.backgroundColor='#DEF991'">
Expand all tabs
</button>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
const toggleBtn = document.getElementById('master-toggle');

toggleBtn.addEventListener('click', function () {
const action = this.getAttribute('data-action');
const headers = document.querySelectorAll('.accordion');

headers.forEach(header => {
const isActive = header.classList.contains('active');
const panel = header.nextElementSibling; // Grabs the corresponding .panel container

if (action === 'expand' && !isActive) {
// Open it by simulating a standard click
header.click();
} else if (action === 'collapse' && isActive) {
// Close it by simulating a standard click
header.click();
}
});

// Flip button text and states
if (action === 'expand') {
this.setAttribute('data-action', 'collapse');
this.textContent = 'Collapse all tabs';
} else {
this.setAttribute('data-action', 'expand');
this.textContent = 'Expand all tabs';
}
});
});
</script><div class="accordion"><h3 id="h_01K9T6611VR80WNH9D8EME6EW6">How to fix a table wrap in &lt;figure&gt; elements</h3></div><div class="panel">
<p>The new article editor uses <code>&lt;figure&gt;</code> 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.</p>
<div class="p"><div class="note important">
<span class="importanttitle">Important:</span> Back up your CSS and content before you make major changes.</div></div>
<p>The new article editor wraps tables in <code>&lt;figure class="table"&gt;</code> elements and may apply inline styles that override custom classes.</p>
<p>To restore your table styles:</p>
<ol>
<li data-list-item-id="e11d38da0fa1d4a6e66a1b9d299c098d1">Update your CSS selectors to target the new markup:<ul>
<li data-list-item-id="eed722472e207a70c9ab337e13057fbfc"><code>figure.table table { /* your table styles */ }</code></li>
<li data-list-item-id="e422b24aae816f31f9274ba4255379f5e"><code>figure.table th, figure.table td { /* cell styles */ }</code></li>
</ul>
</li>
<li data-list-item-id="eeebd301cb7de3eff08345cf675cad120">Use <code>!important</code> sparingly to override inline styles if needed</li>
<li data-list-item-id="e4df0bc1f940c970894c9d7288941824b">Test your changes in a duplicate article before you apply them site-wide</li>
</ol>
<p>To prevent or fix table wrap issues:</p>
<ul>
<li data-list-item-id="e2c1f5c70ac88ccb2951b82a92bb6bdf4">Review your help center CSS to ensure that <code>&lt;figure class="table"&gt;</code> elements don't have restrictive styles, such as max-height or overflow settings</li>
<li data-list-item-id="e319c47606bf9ea32cc26be0a2e0ef878">If you see style issues, update your CSS to target <code>&lt;figure class="table"&gt;</code> as shown:<br><code>figure.table {</code><br><code>max-height: none;</code><br><code>overflow: visible;</code><br><code>}</code>
</li>
<li data-list-item-id="efebf6cf4da4fab9ce67b29e191961d5f">If you migrate content, don't remove <code>&lt;figure&gt;</code><strong> </strong>tags by hand. The new article editor may add them again when you edit content.</li>
</ul>
<div class="p"><div class="note attention">
<span class="attentiontitle">Note:</span> This guidance is based on general product knowledge and is not explicitly present in the original tickets. The new article editor relies on <code>&lt;figure&gt;</code> wrappers by design for feature support and consistency. Use help center CSS customization to resolve style issues, not changes to the editor output HTML.</div></div>
</div><div class="accordion"><h3 id="h_01K9W6494DRSVTPJWAZD4AGQ3R">How to fix table header and header level format issues</h3></div><div class="panel">
<p>Common format issues after migration:</p>
<ul>
<li data-list-item-id="e73f78a1d44c77df793f1bf5ff02fbde1">Table headers may lose their background color or styles</li>
<li data-list-item-id="e8f6d413d165faa0622455f5d1bcd5795">Table header cells may convert incorrectly to H2 text</li>
<li data-list-item-id="e616ef5aa01c81863de5c6f8663397552">H2, H3 sizes may appear different due to changes in default or custom CSS</li>
<li data-list-item-id="e75c627f6bf73a40250bb7cf1cfe34c9e">The editor may not save table changes as expected</li>
</ul>
<p>To ensure that table headers display correctly after migration:</p>
<ol>
<li data-list-item-id="e2e61b4f2d1e7ca20b42bf894a8ba0631">In your help center theme, add CSS rules that target <code>&lt;thead&gt;</code> or <code>&lt;th&gt;</code> elements, for example:<br><code>thead { background-color: #f5f5f5; }</code><br><code>th { background-color: #f5f5f5; }</code>
</li>
<li data-list-item-id="e12857e268b60dcc0fa9bcf7f2117d333">Keep or update any existing <code>&lt;th&gt;</code> styles to maintain consistency</li>
</ol>
<p>To set table headers in the new article editor:</p>
<ol>
<li data-list-item-id="e70647122edd5447429b4b398afedca0a">In the article, select your table, then click the top row</li>
<li data-list-item-id="eade77e7100f132e83a025609188889c9">From the <strong>Row</strong> dropdown, turn on the <strong>Header row</strong> option<ul><li data-list-item-id="eb6abfcf50b73d4d25e2ec9b3369dbec0">If the header row option is missing, manually add <code>&lt;thead&gt;</code> and <code>&lt;th&gt;</code> elements in the HTML source, or check for available plugins or editor options in your new article editor setup</li></ul>
</li>
</ol>
<h4 id="h_01K9WECKCRQC87SD9MKGTSB8M5">If H2 or H3 styles appear incorrect</h4>
<p>Review and update header levels:</p>
<ol>
<li data-list-item-id="ec587eaa27c23defebad3605a07327f07">Edit the article in the new article editor</li>
<li data-list-item-id="e2ffa27521ec160b89b95fc963fbf1270">Select any table header text that the editor converted to H2</li>
<li data-list-item-id="edeca17e32df23a10bcd207c920ed504e">Change its format to the correct style, such as a table header or normal text</li>
</ol>
<p>Adjust header level sizes with CSS:</p>
<ol>
<li data-list-item-id="e293b644b4c901de81d898bec49fa4fda">Go to <strong>Knowledge admin</strong> &gt; <strong>Customize design</strong> &gt; <strong>Customize</strong> &gt; <strong>Edit code</strong> &gt; <strong>style.css</strong><img class="wysiwyg-image-resized" style="aspect-ratio: 1269/1199; width: 53.65%;" src="https://support.zendesk.com/hc/article_attachments/10569901675674" alt="Customize live theme.png" width="1269" height="1199">
</li>
<li data-list-item-id="e29f538d7db3eb4dd9a647c44edfbf4e7">Update the CSS to ensure that H2, H3, and similar styles match your desired sizes</li>
<li data-list-item-id="e200c515dd23635281acfe6b1c726c3fc">Use the <strong>Preview</strong> feature to check the final format before you click <strong>Publish</strong>
</li>
</ol>
<p>If the editor doesn't save your table changes or you see errors like <strong>no changes have been made</strong>:</p>
<ol>
<li data-list-item-id="e8f34cefcbb1e3179c3635e99411c8626">Try to reproduce the issue</li>
<li data-list-item-id="eab148523611fdb6489c89a9f36a8e635">Capture an HTTP Archive (HAR) file and a screen capture</li>
<li data-list-item-id="ed10eea8ee8e0284371bc18e43452d274">Contact Zendesk Customer Support for further help</li>
</ol>
<p>See</p>
<ul>
<li data-list-item-id="e2e9bec81e586b32e84a8977daa751c2c"><a href="https://support.zendesk.com/hc/en-us/articles/9278762282650-Fixing-table-styling-when-transitioning-to-the-new-article-editor" target="_blank" rel="noopener noreferrer">Fixing table styling when transitioning to the new article editor</a></li>
<li data-list-item-id="e6092ff2baa77abaaee2606f5b4000be4"><a href="https://support.zendesk.com/hc/en-us/articles/4408829307418-Adding-and-formatting-tables-in-help-center-articles" target="_blank" rel="noopener noreferrer">Adding and formatting tables in help center articles</a></li>
</ul>
<div class="note tip">
<span class="tiptitle">Tip:</span> 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.</div>
</div><div class="accordion"><h3 id="h_01K9W6494JF4S5P5DEP07ZA1VK">How to fix table format and alignment issues</h3></div><div class="panel">
<p>Common issues after migration:</p>
<ul>
<li data-list-item-id="e603e2137e4be47743d60a6df3187de16">Custom table styles for width and borders do not apply as before</li>
<li data-list-item-id="e0658ed3b1988a34932cf27e08030c8b2">Inconsistent text size and cell space</li>
<li data-list-item-id="e440a70b59813fce898eb93f1c89941c0">Table classes and border styles changed during a migration</li>
<li data-list-item-id="eb989d563941bcca0309329f7cd5d5a2a">Header rows split between <code>&lt;thead&gt;</code> and <code>&lt;tbody&gt;</code>, which causes style inconsistencies</li>
<li data-list-item-id="e69a4647060907e0b29cd9caa3a9304d0">Text overflow and table border issues</li>
</ul>
<p>To fix these issues:</p>
<ul>
<li data-list-item-id="e0ada4ec9ae8c34e0a7617a183e8346be">Update your help center CSS to target table elements<br><code>.article-body td, .article-body th {</code><br><code>padding: 20px;</code><br><code>font-size: 16px;</code><br><code>}</code>
</li>
<li data-list-item-id="e43fe1e2ed9ed462e0aee0d1b085135f8">Fix table alignment<ul>
<li data-list-item-id="e3bc0421fabbfa9d95a363676a0107f48">Use the new article editor table alignment options. The new article editor may have fewer features than the legacy editor.</li>
<li data-list-item-id="e9d149ba601409bdbcc034232692ed516">If tables center every time or alignment does not work, add or adjust CSS:<br><code>.article-body table {</code><br><code>margin-left: 0 !important;</code><br><code>margin-right: auto !important;</code><br><code>}</code>
</li>
</ul>
</li>
<li data-list-item-id="e4513d5832bdb565ac4a8dd79594835e0">Manage table cell space and alignment<ul>
<li data-list-item-id="e253198f4a0952792e0adf5804813aa96">Remove unnecessary inline styles that set cell space so your theme CSS controls that property</li>
<li data-list-item-id="efccdc52d49acb349c2e0d44c35788fb5">Define the desired cell space in your theme CSS</li>
</ul>
</li>
<li data-list-item-id="e76b0e3c98daf037daf3a3b4efed30432">Adjust table classes, borders, and headers<ul>
<li data-list-item-id="ea55d1a78739d1fdfa4deb3298000c1eb">Update CSS rules for any new or changed table classes, for example, <code>.nonItemList</code>
</li>
<li data-list-item-id="edb625446cae57fe24e5910f455ae1d6b">Ensure that all header rows are inside <code>&lt;thead&gt;</code> for proper styling</li>
<li data-list-item-id="ee6b188bb4fbad9e36c11a4166b0cf443">Move any header rows from <code>&lt;tbody&gt;</code> to <code>&lt;thead&gt;</code> as needed</li>
</ul>
</li>
<li data-list-item-id="e7c2d8726c13a17ca715ba9b0ee890bd6">Table text escapes borders or does not wrap as expected, especially after you add a table border in the article editor<ul><li data-list-item-id="e5dba9439798f82c6553a768dde82f3d8">Use these help center theme CSS rules to ensure table cell text wracts correctly and stays within the table borders<br><code>/* 1. Target the class name from your table tag */</code><br><code>table.wysiwyg-table-resized {</code><br><code>/* This tells the browser: "Do not look at the content to decide width.</code><br><code>Look at the &lt;col&gt; widths (40%/60%) and obey them strictly." */</code><br><code>table-layout: fixed;</code><br><code>width: 100%;</code><br><code>}</code><br><br><code>/* 2. Target the cells to ensure wrapping happens */</code><br><code>table.wysiwyg-table-resized td {</code><br><code>/* Forces text to go to the next line when it hits the edge */</code><br><code>white-space: normal;</code><br><br><code>/* Breaks long words/URLs if they are too wide for the 60% column */</code><br><code>overflow-wrap: break-word;</code><br><code>word-wrap: break-word;</code><br><br><code>/* Optional: Makes reading easier by aligning text to the top */</code><br><code>vertical-align: top;</code><br><code>}</code>
</li></ul>
</li>
<li data-list-item-id="e5c014e92f2888eebe858946cd839c715">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.<ul>
<li data-list-item-id="e768d0982f8236882562e2ee772aa1d56">In the article editor, select the table and remove any specific width or style settings applied through the article editor table controls</li>
<li data-list-item-id="ecd4f0265295be35354fb17239a3d2374">If necessary, switch to the HTML view and delete <code>width</code> attributes or inline <code>style</code> tags from <code>&lt;table&gt;</code>, <code>&lt;tr&gt;</code>, or <code>&lt;td&gt;</code> elements</li>
</ul>
</li>
<li data-list-item-id="e751f623876c1d42a34b0db78b5be5ff7">Test and verify changes<ul>
<li data-list-item-id="e96afab3eaa3aa76af32986438d867895">Preview affected articles in the new article editor to confirm the formatting</li>
<li data-list-item-id="e6889f3a23e9c4bb1cdba8b9c8f686926">Repeat for each article with custom tables, as a manual review may be required</li>
</ul>
</li>
</ul>
</div><style>
.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;
}
</style>
<div class="ai-only" aria-hidden="true">
<details>
<summary>THIS SECTION IS AI CONTENT. DON'T EDIT OR DELETE.</summary>
<h2 id="h_01KS0EENAVFJ96S15A7W86HJT4">
Why does my table have restricted height? Why is there a figure tag
around
my table? Why are my table styles changing after migration?
</h2>
<p>
The new article editor or knowledge base uses
<strong>&lt;figure&gt;</strong> 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 <strong>figure.table</strong> and set
<strong>max-height</strong> to <strong>none</strong> and
<strong>overflow</strong> to <strong>visible</strong>.
</p>
<h2 id="h_01KS0EENAVHQJ8S15CR0XST51F">
How do I fix table headers that lost their color? How do I restore
table
header background styles?
</h2>
<p>
Table headers may lose background colors or styles during migration.
You can restore these by adding CSS rules to your theme that target
<strong>&lt;thead&gt;</strong> or <strong>&lt;th&gt;</strong> elements.
For example, set a <strong>background-color</strong> in your
<strong>style.css</strong> file to maintain visual consistency.
</p>
<h2 id="h_01KS0EENAVAY23JD8HQDN3AN2H">
How do I enable a header row in a table? How do I set table headers
in
the new editor?
</h2>
<ol>
<li>
Open the article in the new article editor and select your table.
</li>
<li>Click the top row of the table.</li>
<li>
Select the <strong>Row</strong> dropdown menu.
</li>
<li>
Turn on the <strong>Header row</strong> option.
</li>
</ol>
<h2 id="h_01KS0EENAVYAPYBZV330DGHGHV">
How do I change font size for table cells? How do I adjust table
padding
and text size?
</h2>
<p>
You can standardize text size and cell spacing by updating your help
center CSS. Target <strong>.article-body td</strong> and
<strong>.article-body th</strong> to define specific
<strong>font-size</strong> and <strong>padding</strong> values. This
ensures your theme CSS controls the layout rather than inconsistent
inline
styles.
</p>
<h2 id="h_01KS0EENAVTVGY6HJBREDGXR8W">
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?
</h2>
<p>
To force text to stay within borders, target your table class (such
as
<strong>table.wysiwyg-table-resized</strong>) in your CSS. Set
<strong>table-layout</strong> to <strong>fixed</strong> and
<strong>width</strong> to <strong>100%</strong>. For the cells, set
<strong>white-space</strong> to <strong>normal</strong> and
<strong>overflow-wrap</strong> to <strong>break-word</strong> to
ensure
long strings or links wrap to the next line.
</p>
<h2 id="h_01KS0EENAV155SWSAD7015QSER">
How do I align a table to the left? How do I stop tables from centering
automatically?
</h2>
<p>
If your table centers automatically, you can force left alignment
using
CSS. Add a rule for <strong>.article-body table</strong> that sets
<strong>margin-left</strong> to <strong>0 !important</strong> and
<strong>margin-right</strong> to <strong>auto !important</strong>.
</p>
<h2 id="h_01KS0EENAVS0GC9SM2D4PXDXQF">
How do I fix table headers converted to H2? How do I change incorrect
header levels in tables?
</h2>
<ol>
<li>Edit the article in the new article editor.</li>
<li>
Select the table header text that appears as <strong>H2</strong>.
</li>
<li>
Change the format to the correct style using the editor toolbar.
</li>
<li>
Navigate to <strong>Knowledge admin</strong> &gt;
<strong>Customize design</strong> &gt; <strong>Customize</strong>
&gt; <strong>Edit code</strong> &gt; <strong>style.css</strong>
to
adjust <strong>H2</strong> or <strong>H3</strong> sizes if needed.
</li>
</ol>
<h2 id="h_01KS0EENAV9JMWKP6B9W97Y3TT">
What should I do if the editor does not save table changes? How do
I
report a table editor error?
</h2>
<ol>
<li>Attempt to reproduce the issue in the editor.</li>
<li>
Capture an <strong>HTTP Archive (HAR)</strong> file and a screen
recording of the behavior.
</li>
<li>
Contact <strong>Zendesk Customer Support</strong> or your
<strong>Support</strong> team for technical assistance.
</li>
</ol>
<h2 id="h_01KS0EENAWVCRBZVPNDGAWJY74">
Can I remove figure tags from the HTML? Will deleting figure tags
fix
my table styling?
</h2>
<p>
Do not remove <strong>&lt;figure&gt;</strong> 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.
</p>
<h2 id="h_01KS0EENAWDZNH8Q84JMEVYMF7">
How can I update many articles at once? Is there a way to batch fix
table
styles?
</h2>
<p>
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.
</p>
</details>
</div>