Zendesk hat im zweiten Quartal 2025 einen neuen Beitragseditor eingeführt. Die Umstellung vom alten auf den neuen Beitragseditor erfolgt in vier Phasen und wird bis zum ersten Quartal 2026 abgeschlossen sein. Der neue Editor umfasst u. a. Verbesserungen und Änderungen der Tabellenstile auf HTML- und CSS-Ebene.
Da der neue Editor nicht zu 100 % mit dem alten Editor kompatibel ist, können während oder nach der Umstellung Probleme bei der Darstellung von Tabellen auftreten. In diesem Beitrag werden die möglichen Probleme beschrieben sowie Workarounds und Lösungen erläutert, mit denen Entwickler von Designs und Administratoren sicherstellen können, dass Tabellen dem Styling Ihrer Marke entsprechen.
Änderungen der Darstellung von Tabellen im neuen Editor
Die größte Änderung im Hinblick auf Tabellen im neuen Beitragseditor besteht darin, dass für deren Gestaltung keine HTML-Attribute oder externen CSS-Klassen mehr verwendet, sondern Inline-CSS-Stile (z. B. <table>
, <tr>
und <td>
) direkt auf die Tabellenelemente angewendet werden. Außerdem werden neue Tabellen nun in einem <figure>-Tag verpackt.
-
Im alten Editor wurden Tabellenstile mit einer Kombination aus HTML-Attributen (z. B.
cellpadding
undborder
) und Inline-CSS festgelegt. -
Im neuen Editor werden Tabellenformatierungen (wie Breite und Farbe der Umrandung, Hintergrundfarbe, Höhe und Breite von Zellen, Textfarbe und Zellenabstand) ausschließlich als Inline-CSS-Stile angewendet.
Inline-Stile weisen immer die höchste CSS-Spezifität auf. Das bedeutet:
-
Die Inline-Stile Ihres angepassten Designs können nur dann von CSS-Stilen für die Tabellenformatierung überschrieben werden, wenn Ihre Selektoren dieselbe bzw. eine höhere Spezifität aufweisen oder das Tag
!important
verwenden. -
Ältere Designs und CSS-Stile für HTML-Attribute oder Elementselektoren ohne sorgfältige Spezifizierung können dazu führen, dass die Tabellenstile nach dem Upgrade auf den neuen Editor nicht oder nicht einheitlich angewendet werden.
Beispiele für die Konvertierung von Tabellen während des Upgrades
Die folgenden Beispiele veranschaulichen Probleme, die beim Umstellen von Tabellen auf den neuen Beitragseditor auftreten können.
Umstellung des Zellenabstands von Attribut- zu Inline-Stil-Formatierung
Im alten Beitragseditor wurde der Zellenabstand mit dem Attribut [cellpadding]
angegeben. Im neuen Beitragseditor werden zu diesem Zweck Inline-Stile verwendet. Frühere Stile für [cellpadding]
-Attribute oder Elemente, die diese Eigenschaft erwarten, können erst nach entsprechender Anpassung weiterhin verwendet werden.
<table cellpadding="20">
<td style="padding: 20px;">
Geänderte Behandlung von Umrandungen
Die folgenden Beispiele veranschaulichen die Behandlung von Tabellenumrandungen im alten und den neuen Editor sowie die Umstellung alter Beiträge auf den neuen Editor.
<table style="border-collapse: collapse; width: 100%" border="1">
<tbody>
<tr>
<td style="width: 50%">A</td>
<td style="width: 50%">B</td>
</tr>
<tr>
<td style="width: 50%">C</td>
<td style="width: 50%">D</td>
</tr>
</tbody>
</table>
<figure style="width: 100%" class="wysiwyg-table">
<table style="border-style: solid; border-width: 1px">
<tbody>
<tr>
<td style="border-style: solid; border-width: 1px">A</td>
<td style="border-style: solid; border-width: 1px">B</td>
</tr>
<tr>
<td style="border-style: solid; border-width: 1px">C</td>
<td style="border-style: solid; border-width: 1px">D</td>
</tr>
</tbody>
</table>
</figure>
<figure style="width: 100%" class="wysiwyg-table wysiwyg-table-align-left">
<table
style="border-collapse: collapse; border-style: solid; border-width: 1px"
>
<tbody>
<tr>
<td style="border-style: solid; border-width: 1px; width: 50%">A</td>
<td style="border-style: solid; border-width: 1px; width: 50%">B</td>
</tr>
<tr>
<td style="border-style: solid; border-width: 1px; width: 50%">C</td>
<td style="border-style: solid; border-width: 1px; width: 50%">D</td>
</tr>
</tbody>
</table>
</figure>
Häufig auftretende Probleme und ihre Behebung
In diesem Abschnitt werden Lösungen für Probleme beschrieben, die bei der Umstellung von Tabellen vom alten auf den neuen Editor auftreten können.
Tabellenstile (Zellenabstand, Umrandungen und Farben) werden durch die CSS-Stile Ihres Designs nicht überschrieben
Problem: Die CSS-Stile Ihres angepassten Designs, die bisher für die Steuerung der Tabellenumrandungen, Zellenabstände und Hintergrundfarben zuständig waren, werden nicht mehr angewendet, weil der neue Editor jetzt Inline-Stile verwendet.
Mögliche Lösungen:
-
CSS-Spezifität erhöhen: Verwenden Sie spezifischere Selektoren für die Tabellenelemente im Beitrag. Fügen Sie
!important
-Tags hinzu, um sicherzustellen, dass Ihre Stile die Inline-Stile überschreiben..article-body table, .article-body table td { border: 1px solid #ccc !important; padding: 10px !important; background-color: #f9f9f9 !important; }
-
Figure-Wrapper anpassen: Der Editor verpackt Tabellen nun in
<figure>
-Elementen mit.wysiwyg-table
-Klassen. Passen Sie den Wrapper Ihren Anforderungen entsprechend an:figure.wysiwyg-table { margin: 1em auto; max-width: 90%; }
-
Durch HTML-Attribute bestimmte Stile aktualisieren: Wenn Tabellen in Ihrem Design mithilfe von Attributselektoren (wie
[cellpadding]
oder[border]
) formatiert werden, stellen Sie sie auf die neue Struktur mit Klassen oder Inline-Stilen um.
Tabellen sehen nach dem Upgrade anders aus
Problem: Die Breite oder Ausrichtung von Tabellen geht verloren oder die Tabellen weisen unerwartete Umrandungen und Abstände auf.
- Der neue Editor verpackt die Tabelle in einen
<figure>
-Wrapper mit Inline-Breite. Möglicherweise müssen Sie die Formatierung anpassen oder überschreiben.figure.wysiwyg-table { width: 100% !important; text-align: center; } figure.wysiwyg-table table { width: 100% !important; border-collapse: collapse; }
- Überprüfen Sie die
table
-Standardstile Ihres Designs und passen Sie sie an die neue Struktur an.
Angepasste oder komplexe HTML-Tabellencodes sind unbrauchbar oder müssen manuell angeglichen werden
Mögliche Lösungen:
- Überprüfen Sie den HTML-Quellcode des migrierten Beitrags auf Tabellen.
- Passen Sie den HTML-Code für angepasste Tabellen an das neue Modell an oder schreiben Sie ihn um:
- Verpacken Sie das
<table>
-Tag in einer<figure class="wysiwyg-table">
-Klasse. - Verwenden Sie Inline-Stile für Umrandungen in
<table>
und<td>
.
- Verpacken Sie das
-
Erstellen Sie komplexe Tabellen im neuen Editor von Grund auf neu, um die Kompatibilität zu gewährleisten.
Best Practices für Entwickler von Designs und Administratoren
- Verwenden Sie spezifische CSS-Selektoren für
.wysiwyg-table
, Tabellen in.article-body
oderfigure
-Elemente, in denen Tabellen verpackt werden. - Verwenden Sie
!important
mit Bedacht, um Inline-Stile zu überschreiben. - Testen Sie Tabellen während und nach der Umstellung in verschiedenen Browsern sowie auf Geräten unterschiedlicher Größe.
- Informieren Sie die Verfasser von Inhalten über die Möglichkeiten von Inline-Stilen und weisen Sie sie darauf hin, dass Tabellenanpassungen auf ein Minimum beschränkt werden sollten, um die Wartung zu vereinfachen.
- Erstellen Sie eine Backup-Kopie Ihres Help-Center-Designs und Ihrer Beitragsinhalte, bevor Sie mehrere Beiträge gleichzeitig aktualisieren oder umfangreiche Anpassungen vornehmen.