Tabelstijlen aanpassen

Het Change table styles CSS-fragment laat je consistente styling toepassen op alle tabellen in je kennisbank - inclusief randen, padding, header-achtergrondkleur en afwisselende rijkleuren. Standaard gebruiken tabellen in Document360 een minimale stijl met basisranden. Dit fragment geeft je een kant-en-klaar startpunt dat je kunt aanpassen om bij je merk te passen.

Hoe pas je het table styles snippet toe

1. Navigeer naar () > Knowledge base site in de linker navigatiebalk van het Knowledge Base-portaal.
2. Navigeer in het linker navigatiepaneel naar Site-aanpassing.

3. Klik op Custom CSS & JavaScript.
4. Selecteer het tabblad CSS en klik rechtsboven op Add code snippets .
5. Klik op Tabelstijlen wijzigen. Het fragment wordt in de CSS-editor geplaatst.

6. Pas de kleurwaarden, randbreedtes en opvullingswaarden aan om aan je wensen te voldoen.
7. Klik op Ctrl + S of sla op.

Hoe voeg je aangepaste tabellen toe CSS

Je kunt ook je eigen table CSS schrijven in plaats van het vooraf geladen snippet te gebruiken. Bijvoorbeeld:

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

• Gebruik afwisselende rijkleuren voor leesbaarheid - de nth-child(odd) regel past een achtergrondkleur toe op afwisselende rijen, waardoor brede tabellen makkelijker te scannen zijn over rijen.
• Houd randkleuren subtiel - een lichte randkleur (bijv. #e0e0e0) is meestal minder visueel ruiserig dan een sterke kleur, vooral voor tabellen met veel kolommen.
• Test met zowel sparse- als dense-tabellen – je opvulling en lettergrootte kunnen er prima uitzien in een kleine tabel, maar veroorzaken uitlijningsproblemen in een tabel met veel kolommen of lange celinhoud.

FAQ

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