Mit der caption-sideEigenschaft in CSS können Sie definieren, wo HTMLs positioniert werden sollen
Element, das für HTML-Tabellen verwendet wird. Diese Eigenschaft kann auch auf jedes Element angewendet werden, dessen displayEigenschaft auf festgelegt ist caption-side.
table ( caption-side: top; )Werte
top: der Standard. Positioniert die Beschriftung oben in der Tabelle.bottom: Positioniert die Beschriftung am Ende der Tabelle.inherit: Gibt an, dass der Wert vomcaption-sideWert des übergeordneten Elements geerbt wird
Die caption-sideEigenschaft kann entweder auf die angewendet werden
element or the
display table-caption text-align
Beachten Sie, dass die obigen Werte für caption-siderelativ zum Schreibmodus der Tabelle sind. Wenn eine Tabelle beispielsweise auf einen vertikalen Schreibmodus eingestellt ist, beziehen sich die Werte topund bottomauf die Richtung der Tabelle.
Die folgende Demo enthält eine Schaltfläche zum Umschalten, mit der die caption-sideEigenschaft der Tabelle zwischen topund umgeschaltet wird bottom, sodass Sie den Unterschied anhand einer Tabelle mit vielen Datenzeilen erkennen können:
Siehe die Pen-
Demo der beschriftungsseitigen Eigenschaft von CSS-Tricks (@ css-Tricks)
auf CodePen.
In der nächsten Demo wird das writing-modefür die Tabelle auf gesetzt vertical-rl. Wie durch Umschalten mit der Schaltfläche gezeigt, beziehen sich die Werte topund bottomauf den Schreibmodus der Tabelle:
Weitere Informationen finden Sie in der Pen-
Demo der beschriftungsseitigen Eigenschaft mit unterschiedlichem Schreibmodus von CSS-Tricks (@ css-Tricks)
auf CodePen.
Nicht standardmäßige Firefox-Werte
Firefox unterstützt und unterstützt seit langem vier nicht standardmäßige Werte für caption-side:
left: Positioniert die Beschriftung links von der Tabelle.right: Positioniert die Beschriftung rechts neben der Tabelle.top-outside: Positioniert die Beschriftung oben in der Tabelle, wobei die Abmessungen unabhängig von der Tabelle sindbottom-outside: Positioniert die Beschriftung am unteren Rand der Tabelle, wobei die Abmessungen unabhängig von der Tabelle sind
Die folgende Demo funktioniert nur in Firefox und ermöglicht die Verwendung von vier Schaltflächen zum Festlegen der verschiedenen nicht standardmäßigen Werte:
Weitere Informationen finden Sie in der
Nur- Pen Firefox-Demo der beschriftungsseitigen Eigenschaft von CSS-Tricks (@ css-Tricks)
auf CodePen.
Neue Standardwerte
In den neuesten Entwürfen der CSS - Spezifikation, die caption-sideist Eigentum Teil von CSS logischen Eigenschaften Stufe 1 und enthält die Werte block-start, block-end, inline-start, und inline-end. Die beiden letzteren entsprechen dem Nichtstandard leftund den rightWerten und müssen nur von Benutzeragenten unterstützt werden, die diese Nichtstandardwerte unterstützen.
Mehr Informationen
- beschriftungsseitige Eigenschaft in CSS2.1-Spezifikation
- beschriftungsseitige Eigenschaft in CSS2.2-Spezifikation
- Beschriftungsseite in CSS Logical Properties 1
Browser-Unterstützung
Element, mit dem gleichen Effekt. Diese Eigenschaft wirkt sich zwar auf die Position des Beschriftungsfelds als Ganzes aus (der Wert einer Beschriftung wird berechnet), hat jedoch keinen Einfluss auf die Ausrichtung des Texts innerhalb des Felds. Text innerhalb des Felds kann mithilfe der Eigenschaft ausgerichtet werden.| Chrom | Safari | Feuerfuchs | Oper | 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 für den Standard topund die bottomWerte. Firefox unterstützt zusätzlich auch die Nicht-Standard left, right, top-outside, und bottom-outsideWerte. Es gibt keine Browser - Unterstützung für die neuen block-start, block-end, inline-start, und inline-endWerte.