caption-side CSS property
Baseline
Weitgehend verfügbar
*
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.
* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.
Die caption-side CSS-Eigenschaft platziert den Inhalt eines Tabellen-<caption> auf 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üsselwortwerte angegeben.
Werte
top-
Der Beschriftungskasten sollte auf der Blockanfangsseite der Tabelle positioniert werden.
bottom-
Der Beschriftungskasten sollte auf der Blockendseite der Tabelle positioniert werden.
Hinweis:
Das Modul CSS logische Eigenschaften und Werte definiert zwei logische Werte, inline-start und inline-end, um den Beschriftungskasten jeweils an der Inline-Anfangskante und der Inline-Endkante 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
| Spezifikation |
|---|
| Cascading Style Sheets Level 2 # propdef-caption-side |
| CSS Logical Properties and Values Module Level 1 # caption-side |