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.
caption-side
は CSS のプロパティで、表 (<table>
) の <caption>
の中身を指定された側に配置します。この値は表の writing-mode
に対する相対値です。
試してみましょう
構文
css
/* 方向を示す値 */
caption-side: top;
caption-side: bottom;
/* 倫理値 */
caption-side: inline-start;
caption-side: inline-end;
/* グローバル値 */
caption-side: inherit;
caption-side: initial;
caption-side: revert;
caption-side: unset;
caption-side
プロパティは、以下のキーワード値のうちの一つで指定します。
値
top
-
キャプションボックスを表のブロック方向の先頭に配置します。
bottom
-
キャプションボックスを表のブロック方向の末尾に配置します。
inline-start
-
キャプションボックスを表のインライン方向の先頭に配置します。
inline-end
-
キャプションボックスを表のインライン方向の末尾に配置します。
公式定義
初期値 | top |
---|---|
適用対象 | 表のキャプション要素 |
継承 | あり |
計算値 | 指定通り |
アニメーションの種類 | 離散値 |
形式文法
caption-side =
top |
bottom
例
キャプションを上や下に設定
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;
}
結果
仕様書
Specification |
---|
Cascading Style Sheets Level 2 # propdef-caption-side |
CSS Logical Properties and Values Level 1 # caption-side |
ブラウザーの互換性
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
caption-side | ||||||||||||
bottom | ||||||||||||
bottom-outside | ||||||||||||
left | ||||||||||||
right | ||||||||||||
top | ||||||||||||
top-outside | ||||||||||||
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.
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.