Tabellen mit abgerundeten Ecken
/* =================================================================
Rounded Tables
================================================================= */
root: {
/* Tables */
--ads-table-border-color: #000000;
--ads-table-border-color-dark: #4D4D4D;
--ads-table-head-background-color: transparent;
--ads-table-head-background-color-dark: transparent;
/* Border radius */
--ads-border-radius: 10px;
}
table.tableblock {
border-color: var(--ads-table-border-color);
border-collapse: separate;
border-spacing: 0;
border-radius: var(--ads-border-radius);
background: none;
overflow: hidden;
}
table.tableblock th {
background-color: var(--ads-table-head-background-color);
font-weight: bold;
}
table.tableblock td {
padding: .6em .8em;
text-align: left;
}
table thead th:first-child {
border-top-left-radius: var(--ads-border-radius);
}
table thead th:last-child {
border-top-right-radius: var(--ads-border-radius);
}
table tbody tr:last-child td:first-child {
border-bottom-left-radius: var(--ads-border-radius);
}
table tbody tr:last-child td:last-child {
border-bottom-right-radius: var(--ads-border-radius);
}
table:not(:has(thead)) tbody tr:first-child td:first-child {
border-top-left-radius: var(--ads-border-radius);
}
table:not(:has(thead)) tbody tr:first-child td:last-child {
border-top-right-radius: var(--ads-border-radius);
}
@media vivliostyle {
table {
border-color: var(--ads-table-border-color-dark);
}
table.tableblock th,
table.tableblock td {
background-color: var(--ads-table-head-background-color-dark);
}
}
@media (prefers-color-scheme: dark) {
table.tableblock, table.tableblock td, table.tableblock th {
border-color: var(--ads-table-border-color-dark);
}
}
CSS-Stile in adoc Studio integrieren
Neuen Produktstil erstellen (empfohlen)
Duplizieren Sie einen vorhandenen Produktstil
Integrieren Sie den neuen CSS Code in das duplizierte Stylesheet
Diese Variante sorgt für ein konsistentes Erscheinungsbild und vereinfacht spätere Änderungen, da alle Dokumente denselben zentral gepflegten Style verwenden.
Projektspezifisches Stylesheet
Legen Sie Im Projekt eine Datei styles.css an.
Schreiben Sie oberhalb des Dokumenttitels jedes betroffenen AsciiDoc-Dokuments die Zeile
:stylesheet: styles.css
Es wird nun ausschließlich das neue CSS genutzt. Gestalten Sie die styles.css nach Ihren Wünschen. Dieser Ansatz bietet maximale Flexibilität, wenn beispielsweise verschiedene Designs in einem Projekt benötigt werden oder Asciidoctor-Kompatibilität gefragt ist.
Weitere Informationen finden Sie in unserer CSS Dokumentation im Benutzerhandbuch.