caption-side
caption-side
は CSS のプロパティで、表 (<table>
) の <caption>
の中身を指定された側に配置します。この値は表の writing-mode
に対する相対値です。
試してみましょう
構文
/* 方向を示す値 */
caption-side: top;
caption-side: bottom;
/* 警告: 非標準の値 */
caption-side: block-start;
caption-side: block-end;
caption-side: inline-start;
caption-side: inline-end;
/* グローバル値 */
caption-side: inherit;
caption-side: initial;
caption-side: revert;
caption-side: unset;
caption-side
プロパティは、以下のキーワード値のうちの一つで指定します。
値
top
-
キャプションボックスを表の上方に配置します。
bottom
-
キャプションボックスを表の下方に配置します。
block-start
-
キャプションボックスを表のブロック方向の先頭に配置します。
block-end
-
キャプションボックスを表のブロック方向の末尾に配置します。
inline-start
-
キャプションボックスを表のインライン方向の先頭に配置します。
inline-end
-
キャプションボックスを表のインライン方向の末尾に配置します。
公式定義
形式文法
caption-side =
top |
bottom
例
キャプションを上や下に設定
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
.top caption {
caption-side: top;
}
.bottom caption {
caption-side: bottom;
}
table {
border: 1px solid red;
}
td {
border: 1px solid blue;
}
結果
仕様書
Specification |
---|
CSS Logical Properties and Values Level 1 # caption-side |
ブラウザーの互換性
BCD tables only load in the browser