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

  1. 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.

  1. 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.