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.

* Some parts of this feature may have varying levels of support.

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

css
/* 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

Anfangswerttop
Anwendbar auftable-caption Elemente
VererbtJa
Berechneter Wertwie angegeben
Animationstypdiskret

Formale Syntax

caption-side = 
top |
bottom

Beispiele

Beschriftungen oberhalb und unterhalb festlegen

HTML

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

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
# propdef-caption-side
CSS Logical Properties and Values Level 1
# caption-side

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
caption-side
bottom
bottom-outside
Non-standard
left
Non-standard
right
Non-standard
top
top-outside
Non-standard
top and bottom are relative to the writing-mode value

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
In development. Supported in a pre-release version.
In development. Supported in a pre-release version.
No support
No support
Non-standard. Check cross-browser support before using.

Siehe auch