DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!
Die CSS-Eigenschaft caption-side ermöglicht es Ihnen zu definieren, *wo* das HTML-Element <caption>, das für HTML-Tabellenüberschriften verwendet wird, positioniert werden soll. Diese Eigenschaft kann auch auf jedes Element angewendet werden, dessen display-Eigenschaft auf caption-side gesetzt ist.
table {
caption-side: top;
}Syntax
caption-side: top | bottom | block-start | block-end | inline-start | inline-end- Anfangswert:
top - Gilt für: table-caption-Elemente
- Vererbt: ja
- Berechneter Wert: wie angegeben
- Animationstyp: diskret
Werte
/* Directional values */
caption-side: top;
caption-side: bottom;
/* Logical values */
caption-side: block-start;
caption-side: block-end;
caption-side: inline-start;
caption-side: inline-end;
/* Global values */
caption-side: inherit;
caption-side: initial;
caption-side: revert;
caption-side: unset;top: der Standardwert. Positioniert die Beschriftung am oberen Rand der Tabelle.bottom: Positioniert die Beschriftung am unteren Rand der Tabelle.block-start: Positioniert die Beschriftung am Anfangsrand der Tabelle in Blockrichtung.block-end: Positioniert die Beschriftung am Endrand der Tabelle in Blockrichtung.inline-start: Positioniert die Beschriftung am Anfangsrand der Tabelle in Inline-Richtung.inline-end: Positioniert die Beschriftung am Endrand der Tabelle in Inline-Richtung.inherit: Zeigt an, dass der Wert vomcaption-side-Wert seines Elternelements geerbt wird.
Die caption-side-Eigenschaft kann entweder auf das <table>-Element oder das <caption>-Element angewendet werden, mit demselben Effekt. Während diese Eigenschaft die Position der Beschriftungsbox als Ganzes beeinflusst (der display-Wert einer Beschriftung berechnet sich zu table-caption), beeinflusst sie nicht die Ausrichtung des Textes innerhalb der Box. Text innerhalb der Box kann mit der text-align-Eigenschaft ausgerichtet werden.
Beachten Sie, dass die obigen Werte für caption-side relativ zum writing-mode der Tabelle sind. Wenn beispielsweise eine Tabelle auf einen vertikalen Schreibmodus gesetzt ist, dann sind die Werte top und bottom relativ zur Ausrichtung der Tabelle.
Beispiele für caption-side
Die folgende Demo enthält eine "Toggle"-Schaltfläche, die die caption-side-Eigenschaft der Tabelle zwischen top und bottom umschaltet, sodass Sie den Unterschied anhand einer Tabelle mit vielen Datenzeilen sehen können.
In der nächsten Demo ist der writing-mode für die Tabelle auf vertical-rl gesetzt. Wie durch das Umschalten mit der Schaltfläche demonstriert, sind die Werte top und bottom relativ zum Schreibmodus der Tabelle.
Nicht standardmäßige, nur für Firefox gültige Werte
Firefox unterstützt seit langem und unterstützt immer noch vier nicht standardmäßige Werte für caption-side.
left: positioniert die Beschriftung links von der Tabelle.right: positioniert die Beschriftung rechts von der Tabelle.top-outside: positioniert die Beschriftung am oberen Rand der Tabelle, wobei ihre Abmessungen unabhängig von der Tabelle sind.bottom-outside: positioniert die Beschriftung am unteren Rand der Tabelle, wobei ihre Abmessungen unabhängig von der Tabelle sind.
Die folgende Demo funktioniert nur in Firefox und ermöglicht es Ihnen, mit vier Schaltflächen die verschiedenen nicht standardmäßigen Werte einzustellen.
Browser-Unterstützung
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 1+ | 1+ | 1+ | 9.2+ | 8+ | 2.1+ | 3.2+ |
Die Unterstützung in der obigen Tabelle bezieht sich auf die grundlegende Unterstützung der Standardwerte top und bottom. Firefox unterstützt zusätzlich die nicht standardmäßigen Werte left, right, top-outside und bottom-outside. Für die neuen Werte block-start, block-end, inline-start und inline-end gibt es keine Browserunterstützung.