What's my plan?
All Suites Team, Growth, Professional, Enterprise, or Enterprise Plus
Support with Guide Professional or Enterprise

Zendesk ha introdotto un nuovo editor di articoli negli account nel secondo trimestre del 2025. Il passaggio dall’editor di articoli legacy al nuovo editor di articoli avverrà in quattro fasi. Il nuovo editor introduce miglioramenti e modifiche, incluso lo stile delle tabelle a livello di HTML e CSS.

Poiché il nuovo editor non è compatibile al 100% con l’editor legacy, potrebbero verificarsi alcuni problemi comuni relativi alle tabelle durante o dopo l’aggiornamento al nuovo editor. Questo articolo guida gli sviluppatori e gli amministratori dei temi attraverso questi problemi, oltre a soluzioni alternative per garantire che le tabelle si adattino allo stile del brand come previsto.

Nota: Se riscontri ulteriori problemi o soluzioni, aggiungili nella sezione commenti in fondo a questo articolo.
Questo articolo include i seguenti argomenti:
  • Modifiche allo stile delle tabelle nel nuovo editor
  • Esempi di conversioni di tabelle durante l’aggiornamento
  • Problemi comuni e come risolverli
  • Prassi ottimali per sviluppatori e amministratori di temi

Modifiche allo stile delle tabelle nel nuovo editor

Il cambiamento più importante per le tabelle nel nuovo editor di articoli è l’uso di stili CSS incorporati applicati direttamente agli elementi delle tabelle (ad esempio, <table>, <tr>, e <td>) anziché basarsi su attributi HTML o classi CSS esterne per lo stile delle tabelle. Anche le nuove tabelle sono ora racchiuse in a <figura> tag.

  • Nell’editor precedente, gli stili di tabella venivano applicati usando una combinazione di attributi HTML (ad esempio, cellpadding, border) e alcuni CSS incorporati.

  • Nel nuovo editor, la personalizzazione delle tabelle (come larghezza del bordo, colore del bordo, colore di sfondo, altezza/larghezza della cella, colore del testo e spaziatura interna) viene applicata rigorosamente come stili CSS incorporati.

Gli stili incorporati hanno sempre la specificità CSS più alta, il che significa:

  • Le tabelle di targeting degli stili CSS del tema personalizzato non possono sostituire questi stili incorporati, a meno che i selettori non usino una specificità uguale/superiore !important.

  • I temi e gli stili CSS meno recenti che hanno come target attributi HTML o selettori di elementi senza un’attenta specificità potrebbero scoprire che gli stili delle tabelle non sono corretti o sono applicati in modo incoerente dopo l’aggiornamento al nuovo editor.

Esempi di conversioni di tabelle durante l’aggiornamento

Gli esempi seguenti illustrano i problemi che possono verificarsi durante la conversione delle tabelle nel nuovo editor di articoli.

Spaziatura cella convertita da attributo a stile incorporato

L’editor degli articoli legacy usa [cellpadding] per specificare il riempimento, mentre il nuovo editor di articoli usa lo stile in linea. Targeting per stili precedenti [cellpadding] gli attributi o gli elementi che prevedono tale proprietà non funzioneranno più fino a quando non verranno modificati.

Editor di articoli legacy HTML
<table cellpadding="20">
Nuovo editor di articoli HTML
<td style="padding: 20px;">

Modifiche alla gestione delle frontiere

Gli esempi seguenti illustrano come vengono gestiti i bordi delle tabelle con l’editor legacy, il nuovo editor e gli articoli legacy convertiti nel nuovo editor.

HTML generato inserendo una tabella nell’editor legacy
<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>
HTML generato inserendo una tabella nel nuovo editor
<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>
HTML generato convertendo una tabella dall’editor legacy al nuovo editor
<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>

Problemi comuni e come risolverli

Questa sezione descrive diversi problemi comuni derivanti dalla transizione delle tabelle dall'editor legacy al nuovo editor e come risolverli.

CSS del tema che non sovrascrive gli stili di tabella (padding, bordi e colori)

Problema: Il CSS del tema personalizzato che in precedenza controllava i bordi delle tabelle, la spaziatura interna delle celle o i colori di sfondo non viene applicato perché l’editor ora usa gli stili incorporati.

Possibili soluzioni:

  • Aumenta la specificità CSS: Usa selettori più specifici per scegliere come target gli elementi della tabella all’interno dell’articolo. Aggiunta !important assicura che gli stili sovrascrivano gli stili incorporati.
    .article-body table,
.article-body table td {
  border: 1px solid #ccc !important;
  padding: 10px !important;
  background-color: #f9f9f9 !important;
}
  • Scegli come target la figura: L’editor ora racchiude le tabelle all’interno <figure> elementi con classi .wysiwyg-table. Personalizza il wrapper come necessario:
    figure.wysiwyg-table {
  margin: 1em auto;
  max-width: 90%;
}
  • Aggiorna gli stili che si basano sugli attributi HTML: Se le tabelle degli stili dei temi usano selettori di attributi (come [cellpadding] o [border]), aggiornali per scegliere come target la nuova struttura usando classi o stili incorporati.

Le tabelle hanno un aspetto diverso dopo l’aggiornamento

Problema: Le tabelle perdono le configurazioni di larghezza o allineamento oppure vengono visualizzati bordi e spaziature imprevisti.

Possibili soluzioni:
  • Il nuovo editor inserisce la tabella in a <figure> con larghezza incorporata. Potrebbe essere necessario modificare o sostituire.
    figure.wysiwyg-table {
  width: 100% !important;
  text-align: center;
}
figure.wysiwyg-table table {
  width: 100% !important;
  border-collapse: collapse;
}
  • Controlla i temi table stili predefiniti e si adattano alla nuova struttura.

Il codice HTML delle tabelle personalizzate o complesse presenta interruzioni o necessita di modifiche manuali

Problema: Se avevi tabelle personalizzate con attributi insoliti o stili incorporati personalizzati, l’aggiornamento dall’editor legacy al nuovo editor potrebbe non gestirli perfettamente.
Nota: Quando le tabelle nell’editor legacy sono state modificate tramite il codice sorgente o contengono HTML non assistenza dal nuovo editor , il nuovo editor racchiude le tabelle all’interno di un blocco HTML. In questo caso, non potrai usare il nuovo componente tabella dell’editor di articoli per modificare le tabelle. Dovrai invece usare l’ editor del codice sorgente per aggiornare il blocco HTML.

Possibili soluzioni:

  • Esamina l’origine HTML dell’articolo di cui è stata eseguita la migrazione per le tabelle.
  • Modifica o riscrivi l’HTML della tabella personalizzata per seguire il nuovo modello:
    • Avvolgi il <table> all’interno di a <figure class="wysiwyg-table">.
    • Usa gli stili incorporati per i bordi di entrambi <table> e <td>.

  • Per garantire la compatibilità, valuta la possibilità di ricreare tabelle complesse nel nuovo editor.

Prassi ottimali per sviluppatori e amministratori di temi

Segui le best practice seguenti per ridurre al minimo i problemi durante la migrazione delle tabelle al nuovo editor di articoli:
  • Usa il targeting di selettori CSS specifici .wysiwyg-table, tabelle all’interno .article-body, o figure elementi a capo delle tabelle.
  • Usa !important per sovrascrivere gli stili incorporati.
  • Prova le tabelle durante e dopo l’aggiornamento su più browser e dimensioni dei dispositivi.
  • Informa gli autori di contenuti sulla possibilità degli stili incorporati e sulla necessità di ridurre al minimo le personalizzazioni delle tabelle per una manutenzione più semplice.
  • Prima di eseguire aggiornamenti in batch o personalizzazioni pesanti, esegui il backup del tema centro assistenza e dei contenuti degli articoli.

Avvertenza sulla traduzione: questo articolo è stato tradotto usando un software di traduzione automatizzata per fornire una comprensione di base del contenuto. È stato fatto tutto il possibile per fornire una traduzione accurata, tuttavia Zendesk non garantisce l'accuratezza della traduzione.

Per qualsiasi dubbio sull'accuratezza delle informazioni contenute nell'articolo tradotto, fai riferimento alla versione inglese dell'articolo come versione ufficiale.

Powered by Zendesk