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

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

Initialer Werttop
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 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