Resolución de problemas con las tablas en el nuevo editor de artículos

Cuando haga la migración del editor de artículos heredado al nuevo editor, es posible que vea problemas de estilo de tabla.

Este artículo muestra cómo resolver problemas comunes después de hacer la migración al nuevo editor.

En este artículo se tratan los siguientes temas:

• Cómo corregir una matriz de tabla en elementos de <figura>
• Cómo corregir los problemas de formato de encabezado de tabla y nivel de encabezado
• Cómo corregir problemas de formato y alineación de tablas

Cómo corregir una matriz de tabla en elementos de <figura>

El nuevo editor de artículos utiliza etiquetas de <figure> para proporcionar estilos y funciones uniformes para las tablas en los distintos navegadores y plataformas. Este comportamiento es parte de la arquitectura del plugin de tabla del nuevo editor. Puede causar problemas de estilo, como una altura de tabla restringida o problemas de formato no deseados. En esta sección se explica por qué sucede esto y cómo prevenirlo o solucionarlo.

Importante: Haga una copia de seguridad de CSS y contenido antes de hacer cambios importantes.

El nuevo editor de artículos encierra las tablas en elementos de <figure class="table"> y puede aplicar estilos incorporados que anulen las clases personalizadas.

Para corregir esto, restaure los estilos de tabla:

1. Actualice los selectores CSS para enfocarse en el nuevo margen:
   • figure.table table { /* your table styles */ }
   • figure.table th, figure.table td { /* cell styles */ }
2. Use !important con moderación para anular los estilos incorporados si es necesario
3. Pruebe los cambios en un artículo duplicado antes de aplicarlos en todo el sitio

Para evitar o corregir problemas de la envolvente de la mesa:

• Revise el CSS del centro de ayuda para asegurarse de que los elementos de <figure class="table"> no tengan estilos restrictivos, como la configuración de altura máxima o de desborde
• Si ve problemas de estilo, actualice su CSS para que se centre en los <figure class="table"> como se muestra:
  figure.table {
max-height: none;
overflow: visible;
}
• Si migra contenido, no elimine <figure>las etiquetas manualmente. Es posible que el nuevo editor de artículos los vuelva a agregar al editar el contenido.

Nota: Esta guía se basa en el conocimiento general del producto y no está presente explícitamente en los tickets originales. El nuevo editor de artículos se basa en <figure> wrappers by design for feature Support y la coherencia. Personalizar el CSS del centro de ayuda es la estrategia recomendada para resolver problemas de estilo, en lugar de intentar cambiar el HTML de salida del editor.

Cómo corregir los problemas de formato de encabezado de tabla y nivel de encabezado

Problemas de formato comunes después de la migración:

• Los encabezados de tabla pueden perder su color de fondo o estilos
• Las celdas del encabezado de tabla pueden convertirse incorrectamente en texto H2
• Los tamaños de H2, H3 pueden parecer diferentes debido a cambios en CSS predeterminado o personalizado
• Es posible que el editor no guarde los cambios de tabla como se esperaba

Para asegurarse de que los encabezados de tabla se muestren correctamente después de la migración:

1. En el tema de su centro de ayuda, agregue reglas CSS que apunten a elementos de <thead> o <th>, por ejemplo:
   thead { background-color: #f5f5f5; }
th { background-color: #f5f5f5; }
2. Mantener o actualizar los estilos de <th> existentes para mantener la coherencia

Para establecer encabezados de tabla en el nuevo editor de artículos:

1. En el artículo, seleccione la tabla y luego haga clic en la fila superior
2. En el menú desplegable Fila, active la opción Fila de encabezado
   • Si falta la opción de fila de encabezado, agregue manualmente elementos de <thead> y <th> en la fuente de HTML, o busque plugins u opciones de editor disponibles en la nueva configuración del editor de artículos

Si los estilos H2 o H3 parecen incorrectos

Revisar y actualizar los niveles de encabezado:

1. Editar el artículo en el nuevo editor de artículos
2. Seleccione el texto del encabezado de la tabla que el editor convirtió en H2
3. Cambie su formato al estilo correcto, como un encabezado de tabla o texto normal

Ajustar el tamaño del encabezado con CSS:

1. Ir a > de administrador de Conocimiento Personalizar diseño > Personalizar > Editar código > style.CSS
2. Actualice el CSS para asegurarse de que los estilos H2, H3 y similares coincidan con los tamaños deseados
3. Utilice la función Previsualizar para verificar el formato final antes de hacer clic en Publicar.

Si el editor no guarda los cambios en la tabla o ve errores como que no se han hecho:

1. Intente reproducir el problema
2. Capturar un archivo HTTP Archive (HAR) y una captura de pantalla
3. Contacte a Support al cliente de Zendesk si desea más ayuda

Si desea más información, consulte los siguientes artículos:

• Corregir el estilo de las tablas al hacer la transición al nuevo editor de artículos
• Adición y formato de tablas en los artículos del centro de ayuda

Sugerencia: Si tiene muchos artículos que actualizar, considere un script por lotes o una herramienta de migración para estandarizar los niveles y estilos de encabezado, y siempre haga una copia de seguridad de los artículos antes de hacer cambios masivos. Si la nueva implementación del editor de artículos carece de ciertas funciones de tabla, verifique si hay plugins disponibles o comuníquese con el administrador de la plataforma si desea mejoras.

Cómo corregir problemas de formato y alineación de tablas

Problemas comunes después de la migración:

• Los estilos de tabla personalizados para ancho y bordes no se aplican como antes
• Tamaño de texto y espacio de celdas incoherentes
• Las clases de tabla y los estilos de borde cambiaron durante una migración
• Las filas de encabezado se dividen entre <thead> y <tbody>, lo que causa incoherencias de estilo

Para corregir estos problemas:

• Actualice el CSS de su centro de ayuda a los elementos de la tabla de destino
  .article-body td, .article-body th {
padding: 20px;
font-size: 16px;
}
• Corregir alineación de tabla
  • Utilice las nuevas opciones de alineación de tablas del editor de artículos. El nuevo editor de artículos puede tener menos funciones que el editor heredado.
  • Si las tablas se centran cada vez o la alineación no funciona, agregue o ajuste CSS:
    .article-body table {
margin-left: 0 !important;
margin-right: auto !important;
}
• Administrar el espacio y la alineación de las celdas de la tabla
  • Elimine los estilos incorporados innecesarios que establecen el espacio entre celdas para que el CSS del tema controle esa propiedad
  • Definir el espacio de celdas deseado en el CSS del tema
• Ajustar clases de tablas, bordes y encabezados
  • Actualizar reglas CSS para cualquier clase de tabla nueva o cambiada, por ejemplo, .nonItemList
  • Asegúrese de que todas las filas de encabezados estén dentro del <thead> para un estilo correcto
  • Mover las filas de encabezados de <tbody> a <thead> según sea necesario
• Probar y verificar cambios
  • Previsualizar los artículos afectados en el nuevo editor de artículos para confirmar el formato
  • Repita el procedimiento para cada artículo con tablas personalizadas, ya que puede ser necesario hacer una revisión manual

Si desea más información, consulte Transición al nuevo editor de artículos.

Descargo de responsabilidad de la traducción: Este artículo ha sido traducido usando software de traducción automática para proporcionar una idea básica del contenido. Se han realizado esfuerzos razonables para proporcionar una traducción exacta, sin embargo, Zendesk no garantiza la exactitud de la traducción.

Si surge alguna pregunta relacionada con la exactitud de la información incluida en el artículo traducido, consulte la versión en inglés del artículo, que es la versión oficial.