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.
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 |
---|---|
適用対象 | 表のキャプション要素 |
継承 | あり |
計算値 | 指定通り |
アニメーションの種類 | 離散値 |
形式文法
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 Revision 2 (CSS 2.2) Specification # propdef-caption-side |
CSS Logical Properties and Values Level 1 # caption-side |
ブラウザーの互換性
BCD tables only load in the browser