caption-side
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Die caption-side
CSS Eigenschaft platziert den Inhalt des <caption>
einer Tabelle auf der angegebenen Seite. Die Werte sind relativ zum writing-mode
der Tabelle.
Probieren Sie es aus
Syntax
/* Directional values */
caption-side: top;
caption-side: bottom;
/* Global values */
caption-side: inherit;
caption-side: initial;
caption-side: revert;
caption-side: revert-layer;
caption-side: unset;
Die caption-side
-Eigenschaft wird als einer der unten aufgeführten Schlüsselwortwerte angegeben.
Werte
top
-
Die Beschriftungsbox sollte an der Blockanfangsseite der Tabelle positioniert werden.
bottom
-
Die Beschriftungsbox sollte an der Blockendseite der Tabelle positioniert werden.
Hinweis: Das CSS logical properties and values Modul definiert zwei logische Werte, inline-start
und inline-end
, um die Beschriftungsbox am Inline-Anfangsrand bzw. am Inline-Endrand der Tabelle zu positionieren. Diese Werte werden in keinem Browser unterstützt.
Formale Definition
Initialer Wert | top |
---|---|
Anwendbar auf | table-caption Elemente |
Vererbt | Ja |
Berechneter Wert | wie angegeben |
Animationstyp | diskret |
Formale Syntax
top |
bottom
Beispiele
Beschriftungen oberhalb und unterhalb festlegen
HTML
<table class="top">
<caption>
Caption ABOVE the table
</caption>
<tr>
<td>Some data</td>
<td>Some more data</td>
</tr>
</table>
<br />
<table class="bottom">
<caption>
Caption BELOW the table
</caption>
<tr>
<td>Some data</td>
<td>Some more data</td>
</tr>
</table>
CSS
.top caption {
caption-side: top;
}
.bottom caption {
caption-side: bottom;
}
table {
border: 1px solid red;
}
td {
border: 1px solid blue;
}
Ergebnis
Spezifikationen
Specification |
---|
Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # propdef-caption-side |
CSS Logical Properties and Values Level 1 # caption-side |
Browser-Kompatibilität
BCD tables only load in the browser
Siehe auch
<caption>
- CSS table Modul
- CSS logical properties and values Modul