Solução de problemas com tabelas no novo editor de artigos

Ao migrar do editor de artigos legado para o novo editor, você verá problemas de estilo de tabela.

Este artigo ensina a resolver problemas comuns após a migração para o novo editor.

Este artigo abrange os seguintes tópicos:

• Como corrigir um encerramento de tabela em elementos de <figura>
• Como corrigir problemas de cabeçalho de tabela e formato de nível de cabeçalho
• Como corrigir problemas de formato e alinhamento da tabela

Como corrigir um encerramento de tabela em elementos de <figura>

O novo editor de artigos usa tags de <figure> para fornecer estilos e recursos consistentes para tabelas em diferentes navegadores e plataformas. Esse comportamento faz parte da arquitetura do plug-in de tabela do novo editor. Isso pode causar problemas de estilo, como altura da tabela restrita ou problemas de formato indesejados. Esta seção explica por que isso acontece e como evitar ou corrigir isso.

Importante: Faça um backup do seu CSS e conteúdo antes de fazer alterações importantes.

O novo editor de artigos encerra as tabelas em elementos de <figure class="table"> e pode aplicar estilos embutidos que substituem classes personalizadas.

Para corrigir isso, restaure seus estilos de tabela:

1. Atualize seus seletores CSS para segmentar a nova marcação:
   • figure.table table { /* your table styles */ }
   • figure.table th, figure.table td { /* cell styles */ }
2. Use !important com parcimônia para substituir estilos embutidos, se necessário
3. Teste suas alterações em um artigo duplicado antes de aplicá-las em todo o site

Como evitar ou corrigir problemas de encerramento de tabela:

• Revise o CSS da central de ajuda para garantir que os elementos de <figure class="table"> não tenham estilos restritivos, como configurações de altura máxima ou transferência
• Se você vir problemas de estilo, atualize seu CSS para segmentar <figure class="table"> conforme mostrado:
  figure.table {
max-height: none;
overflow: visible;
}
• Se você migrar conteúdo, não remova <figure> as tags manualmente. O novo editor de artigos pode adicioná-los novamente quando você edita o conteúdo.

Observação: Essa orientação se baseia no conhecimento geral sobre o produto e não está explicitamente presente nos tickets originais. O novo editor de artigos depende de encerramentos de <figure> por design para o recurso Support e consistência. Personalizar o CSS da central de ajuda é a abordagem recomendada para resolver problemas de estilo, em vez de tentar alterar o HTML de saída do editor.

Como corrigir problemas de formato de cabeçalho e nível de cabeçalho da tabela

Problemas comuns de formato após a migração:

• Cabeçalhos de tabela podem perder a cor ou os estilos de fundo
• Células do cabeçalho da tabela podem ser convertidas incorretamente para texto H2
• Os tamanhos H2, H3 podem ser diferentes devido a alterações no CSS padrão ou personalizado
• O editor pode não salvar as alterações da tabela conforme o esperado

Para garantir que os cabeçalhos da tabela sejam exibidos corretamente após a migração:

1. No tema da central de ajuda, adicione regras CSS que visem elementos de <thead> ou <th>, por exemplo:
   thead { background-color: #f5f5f5; }
th { background-color: #f5f5f5; }
2. Mantenha ou atualize os estilos de <th> existentes para manter a consistência

Como definir cabeçalhos da tabela no novo editor de artigos:

1. No artigo, selecione sua tabela e clique na linha superior
2. Na lista suspensa Linha, ative a opção Linha do cabeçalho
   • Se a opção de linha do cabeçalho estiver ausente, adicione manualmente elementos de <thead> e <th> na origem HTML ou verifique se há plugins ou opções de editor disponíveis na configuração do novo editor de artigos

Se os estilos H2 ou H3 estiverem incorretos

Revisar e atualizar níveis de cabeçalho:

1. Edite o artigo no novo editor de artigos
2. Selecione qualquer texto do cabeçalho da tabela que o editor converteu para H2
3. Altere o formato para o estilo correto, como um cabeçalho de tabela ou texto normal

Ajustar tamanhos de nível do cabeçalho com CSS:

1. Ir para o conhecimento admin > personalizar design > personalizar > editar código > style.CSS
2. Atualize o CSS para garantir que os estilos H2, H3 e semelhantes correspondam aos tamanhos desejados
3. Use o recurso de visualização para verificar o formato final antes de clicar em Publicar

Se o editor não salvar as alterações da tabela ou você ver erros como nenhuma alteração foi feita:

1. Tente reproduzir o problema
2. Capturar um arquivo HTTP Archive (HAR) e uma captura de tela
3. Entre em contato com o Suporte ao cliente Zendesk para obter ajuda adicional

Para mais informações, consulte os seguintes artigos:

• Ajuste do estilo de tabela ao fazer a transição para o novo editor de artigos
• Adição e formatação de tabelas em artigos da central de ajuda

Dica: Se você tem muitos artigos para atualizar, considere usar um script em lote ou uma ferramenta de migração para padronizar níveis e estilos de cabeçalho e sempre fazer um backup de seus artigos antes de fazer alterações em massa. Se a implementação do novo editor de artigos não tiver alguns recursos de tabela, verifique se há plugins disponíveis ou entre em contato com o administrador da sua plataforma para obter melhorias.

Como corrigir problemas de formatação e alinhamento da tabela

Problemas comuns após a migração:

• Estilos de tabela personalizados para largura e bordas não se aplicam como antes
• Tamanho inconsistente do texto e do espaço da célula
• As classes da tabela e os estilos de borda foram alterados durante a migração
• Linhas de cabeçalho divididas entre <thead> e <tbody>, o que causa inconsistências de estilo

Para corrigir esses problemas:

• Atualize o CSS da central de ajuda para segmentar elementos da tabela
  .article-body td, .article-body th {
padding: 20px;
font-size: 16px;
}
• Corrigir o alinhamento da tabela
  • Use as novas opções de alinhamento da tabela do editor de artigos. O novo editor de artigos pode ter menos recursos do que o editor legado.
  • Se as tabelas forem centradas sempre ou o alinhamento não funcionar, adicione ou ajuste CSS:
    .article-body table {
margin-left: 0 !important;
margin-right: auto !important;
}
• Gerenciar espaço e alinhamento da célula da tabela
  • Remova estilos embutidos desnecessários que definem o espaço da célula para que o CSS do tema controle essa propriedade
  • Defina o espaço da célula desejado em seu CSS do tema
• Ajustar classes, bordas e cabeçalhos da tabela
  • Atualizar regras CSS para todas as classes de tabela novas ou alteradas, por exemplo, .nonItemList
  • Certifique-se de que todas as linhas do cabeçalho estejam dentro da <thead> para um estilo adequado
  • Mova as linhas de cabeçalho de <tbody> para <thead> conforme necessário
• Testar e verificar alterações
  • Visualizar os artigos afetados no novo editor de artigos para confirmar a formatação
  • Repita para cada artigo com tabelas personalizadas, pois uma revisão manual pode ser necessária

Para obter mais informações, consulte Transição para o novo editor de artigos

Aviso sobre a tradução: este artigo foi traduzido por um software de tradução automática para oferecer a você uma compreensão básica do conteúdo. Medidas razoáveis foram tomadas para fornecer uma tradução precisa, no entanto, a Zendesk não garante a precisão da tradução.

Em caso de dúvidas relacionadas à precisão das informações contidas no artigo traduzido, consulte a versão oficial do artigo em inglês.