Personalización de estilos de tablas

El fragmento CSS de estilos de tabla de cambio te permite aplicar un estilo consistente a todas las tablas de tu base de conocimiento, incluyendo bordes, relleno, color de fondo del encabezado y colores de fila alternados. Por defecto, las tablas en Document360 usan un estilo minimalista con bordes básicos. Este fragmento te ofrece un punto de partida ya hecho que puedes modificar para adaptarlo a tu marca.

Cómo aplicar el fragmento de estilos de tabla

1. Navega a Configuración () > Sitio de la base de conocimientos en la barra de navegación izquierda del portal de la Base de Conocimientos.
2. En el panel de navegación izquierdo, navega hasta personalización del sitio.

3. Haz clic en CSS y JavaScript personalizados.
4. Selecciona la pestaña CSS y luego haz clic en Añadir fragmentos de código en la esquina superior derecha.
5. Haz clic en Cambiar estilos de tabla. El fragmento se inserta en el editor CSS.

6. Modifica los valores de color, los anchos de borde y los valores de relleno para que se ajusten a tus necesidades.
7. Haz clic en Ctrl + S o guardar.

Cómo añadir CSS de tablas personalizadas

También puedes escribir tu propio CSS de tabla en lugar de usar el fragmento precargado. Por ejemplo:

table th, table td {
  border: 1px solid #67cfbf;
  padding: 2px 10px;
}
table th {
  background: #fcf8c0;
  font-weight: 600;
}
table th:empty {
  display: none;
}
tbody tr:nth-child(odd) {
  background-color: #f2f2f2;
}

Mejores prácticas

• Utiliza colores de fila alternados para legir: la nth-child(odd) regla aplica un color de fondo a las filas alternas, facilitando el escaneo de tablas anchas entre filas.
• Mantén los colores de los bordes discretos : un color de borde claro (por ejemplo, #e0e0e0) suele ser menos ruidoso visualmente que un color fuerte, especialmente en tablas con muchas columnas.
• Prueba con tablas tanto esparsas como densas : tus elecciones de relleno y tamaño de fuente pueden verse bien en una tabla pequeña, pero crear problemas de alineación en una tabla con muchas columnas o contenido de celdas largas.

Preguntas frecuentes

.no-border-table table tr,
.no-border-table table th,
.no-border-table table td {
    border: none;
}