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 Juli 2015.
* Some parts of this feature may have varying levels of support.
Die caption-side CSS Eigenschaft positioniert den Inhalt eines Tabellen-<caption> an der angegebenen Seite. Die Werte sind relativ zum writing-mode der Tabelle.
Probieren Sie es aus
caption-side: top; caption-side: bottom; <section class="default-example" id="default-example"> <table class="transition-all" id="example-element"> <caption> Famous animals </caption> <tbody> <tr> <th>Name</th> <th>Location</th> </tr> <tr> <td>Giraffe</td> <td>Africa</td> </tr> <tr> <td>Penguin</td> <td>Antarctica</td> </tr> <tr> <td>Sloth</td> <td>South America</td> </tr> <tr> <td>Tiger</td> <td>Asia</td> </tr> </tbody> </table> </section> table { font-size: 1.2rem; text-align: left; color: black; } th, td { padding: 0.2rem 1rem; } caption { background: #ffcc33; padding: 0.5rem 1rem; } tr { background: #eeeeee; } tr:nth-child(even) { background: #cccccc; } 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üsselwerten angegeben.
Werte
top-
Der Beschriftungskasten sollte am Blockanfang der Tabelle positioniert werden.
bottom-
Der Beschriftungskasten sollte am Blockende der Tabelle positioniert werden.
Hinweis: Das Modul der logischen CSS-Eigenschaften und Werte definiert zwei logische Werte, inline-start und inline-end, um den Beschriftungskasten am Inline-Anfang und Inline-Ende der Tabelle zu positionieren. Diese Werte werden in keinem Browser unterstützt.
Formale Definition
| Anfangswert | top |
|---|---|
| Anwendbar auf | table-caption Elemente |
| Vererbt | Ja |
| Berechneter Wert | wie angegeben |
| Animationstyp | diskret |
Formale Syntax
caption-side =
top |
bottom
Beispiele
Beschriftungen oben und unten setzen
HTML
<table class="top"> <caption> Caption ABOVE the table </caption> <tbody> <tr> <td>Some data</td> <td>Some more data</td> </tr> </tbody> </table> <br /> <table class="bottom"> <caption> Caption BELOW the table </caption> <tbody> <tr> <td>Some data</td> <td>Some more data</td> </tr> </tbody> </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 # propdef-caption-side |
| CSS Logical Properties and Values Level 1 # caption-side |