Welchen Plan habe ich
Suite, alle Versionen Team, Growth, Professional, Enterprise oder Enterprise Plus
Support mit Guide Professional oder Enterprise

Zendesk hat im zweiten Quartal 2025 einen neuen Beitragseditor eingeführt. Die Umstellung vom alten auf den neuen Beitragseditor erfolgt in vier Phasen. 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.

Hinweis: Falls Sie auf weitere Probleme oder Lösungen stoßen, beschreiben Sie diese bitte im Kommentarbereich am Ende dieses Beitrags.
Dieser Beitrag enthält die folgenden Themen:
  • Änderungen der Darstellung von Tabellen im neuen Editor
  • Beispiele für die Konvertierung von Tabellen während des Upgrades
  • Häufig auftretende Probleme und ihre Behebung
  • Best Practices für Entwickler von Designs und Administratoren

Ä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 und border) 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.

HTML-Code im alten Beitragseditor
<table cellpadding="20">
HTML-Code im neuen Beitragseditor
<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.

Durch Einfügen einer Tabelle im alten Editor erzeugter HTML-Code
<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>
Durch Einfügen einer Tabelle im neuen Editor erzeugter HTML-Code
<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>
Durch Umstellung einer Tabelle vom alten auf den neuen Editor generierter HTML-Code
<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.

Mögliche Lösungen:
  • 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

Problem: Wenn Sie angepasste Tabellen mit ungewöhnlichen Attributen oder angepassten Inline-Stilen eingerichtet hatten, werden diese bei der Umstellung vom alten auf den neuen Editor möglicherweise nicht korrekt verarbeitet.
Hinweis: Wenn Tabellen im alten Editor durch den Quellcode geändert wurden oder HTML-Code enthalten, den der neue Editor nicht unterstützt, verpackt dieser die Tabellen in einem HTML-Block. In diesem Fall können Sie die Tabellen nicht mit der Tabellenkomponente des neuen Beitragseditors bearbeiten. Stattdessen müssen Sie den HTML-Block mit dem Quellcode-Editor aktualisieren.

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

  • 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

Beachten Sie die folgenden Best Practices, um Probleme bei der Umstellung von Tabellen auf den neuen Beitragseditor zu vermeiden:
  • Verwenden Sie spezifische CSS-Selektoren für .wysiwyg-table, Tabellen in .article-body oder figure-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.
Powered by Zendesk