Personnalisation des styles de table

Le snippet CSS des styles de changement de table vous permet d’appliquer un style cohérent à toutes les tables de votre base de connaissances - y compris les bordures, le remplissage, la couleur de fond de l’en-tête et l’alternance des couleurs de lignes. Par défaut, les tables dans Document360 utilisent un style minimaliste avec des bordures basiques. Cet extrait vous donne un point de départ prêt à l’emploi que vous pouvez modifier pour correspondre à votre marque.

Comment appliquer l’extrait de styles de table

1. Naviguez dans () > Knowledge base site dans la barre de navigation de gauche du portail de la base de connaissances.
2. Dans le panneau de navigation de gauche, naviguez vers la personnalisation du site.

3. Cliquez sur CSS & JavaScript personnalisés.
4. Sélectionnez l’onglet CSS , puis cliquez sur Ajouter des extraits de code en haut à droite.
5. Cliquez sur Modifier les styles de tableau. Le extrait est inséré dans l’éditeur CSS.

6. Modifiez les valeurs de couleur, les largeurs des bordures et les valeurs de bourrage pour correspondre à vos besoins.
7. Cliquez sur Ctrl + S ou Enregistrer.

Comment ajouter un CSS personnalisé à la table

Vous pouvez aussi écrire votre propre CSS de table au lieu d’utiliser le extrait préchargé. Par exemple :

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;
}

Meilleures pratiques

• Utilisez des couleurs de lignes alternées pour la lisibilité – la nth-child(odd) règle applique une couleur de fond à des lignes alternées, facilitant ainsi la lecture des larges tableaux à travers les lignes.
• Gardez les couleurs des bordures discrètes – une couleur de bordure claire (par exemple, #e0e0e0) est généralement moins bruyante visuellement qu’une couleur forte, surtout pour les tables avec de nombreuses colonnes.
• Testez avec des tableaux clairsemés et denses – vos choix de remplissage et de taille de police peuvent sembler corrects dans un petit tableau mais créer des problèmes d’alignement dans un tableau avec beaucoup de colonnes ou de longs contenus de cellules.

FAQ

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