Anpassung von Tabellenstilen

Der CSS-Ausschnitt Change Table Styles ermöglicht es dir, auf alle Tabellen in deiner Wissensdatenbank konsistente Stilierung anzuwenden – einschließlich Rand, Auffüllung, Kopfseiten-Hintergrundfarbe und wechselnden Zeilenfarben. Standardmäßig verwenden Tabellen in Document360 einen minimalistischen Stil mit einfachen Rändern. Dieser Ausschnitt gibt dir einen fertigen Ausgangspunkt, den du an deine Marke anpassen kannst.

Wie man den Tabellen-Stil-Snippet anwendet

1. Navigieren Sie in der linken Navigationsleiste des Wissensdatenbank-Portals zu () > Knowledge base site .
2. Im linken Navigationsfenster navigieren Sie zur Site-Anpassung.

3. Klicken Sie auf benutzerdefiniertes CSS & JavaScript.
4. Wähle den CSS-Tab aus und klicke oben rechts auf "Code-Schnipsel hinzufügen ".
5. Klicken Sie auf Tischstile ändern. Der Snippet wird in den CSS-Editor eingefügt.

6. Passe die Farbwerte, Randbreiten und Polsterwerte entsprechend deinen Anforderungen an.
7. Klicke auf Strg + S oder Speichere.

Wie man benutzerdefinierte Tabellen-CSS hinzufügen

Du kannst auch dein eigenes CSS-Tabellen-CSS schreiben, anstatt den vorinstallierten Snippet zu verwenden. Zum Beispiel:

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

Best Practices

• Verwenden Sie abwechselnde Zeilenfarben für die Lesbarkeit – die Regel wendet nth-child(odd) eine Hintergrundfarbe auf alternative Zeilen an, was das Durchsuchen von breiten Tabellen erleichtert.
• Halte die Randfarben dezent – eine helle Randfarbe (z. B. #e0e0e0) ist in der Regel weniger visuell verrauscht als eine starke Farbe, besonders bei Tabellen mit vielen Spalten.
• Teste sowohl mit sparsen als auch mit dichten Tabellen – deine Füll- und Schriftgrößenwahl sehen in einer kleinen Tabelle zwar gut aus, verursachen aber Probleme mit der Ausrichtung in einer Tabelle mit vielen Spalten oder langen Zellen.

FAQ

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