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. Use la personalización CSS del centro de ayuda para resolver problemas de estilo, no cambios en 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. Comuníquese con soporte al cliente de Zendesk si necesita 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 haga copias de seguridad de los artículos cada vez 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
• Desborde de texto y problemas con el borde de la tabla

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
• El texto de la tabla escapa de los bordes o no se encierra como se esperaba, especialmente después de agregar un borde de tabla en el editor de artículos
  • Utilice estas reglas CSS del tema del centro de ayuda para asegurarse de que el texto de la celda de la tabla se englobe correctamente y permanezca dentro de los bordes de la tabla
    /* 1. Target the class name from your table tag */
table.wysiwyg-table-resized {
/* This tells the browser: "Do not look at the content to decide width.
Look at the <col> widths (40%/60%) and obey them strictly." */
table-layout: fixed;
width: 100%;
}

/* 2. Target the cells to ensure wrapping happens */
table.wysiwyg-table-resized td {
/* Forces text to go to the next line when it hits the edge */
white-space: normal;

/* Breaks long words/URLs if they are too wide for the 60% column */
overflow-wrap: break-word;
word-wrap: break-word;

/* Optional: Makes reading easier by aligning text to the top */
vertical-align: top;
}
• Los artículos editados o migrados de versiones anteriores de Zendesk Guide pueden contener formato heredado que entra en conflicto con el CSS del tema actual. Si las correcciones no se aplican como se espera, inspeccione el HTML de la tabla y elimine el formato o los atributos adicionales que puedan afectar el diseño.
  • En el editor de artículos, seleccione la tabla y elimine cualquier configuración de ancho o estilo específica que se aplique a través de los controles de tabla del editor de artículos
  • Si es necesario, cambie a la vista HTML y borre los atributos de width o las etiquetas de style incorporadas de los elementos de <table>, <tr> o <td>
• 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.