caption-side:表(table)のキャプションの配置位置を指定する
初期値 | top |
適用対象 | 表のキャプション要素 |
継承 | する |
アニメーション | 離散値 |
対応ブラウザ | caniuseで確認 |
caption-sideプロパティの説明
caption-side
は、表(<table>
)の中に記述されたキャプション(<caption>
)の表示する位置を指定します。基本的には表の上か下かの二種類から選択することになりますが、厳密にはwriting-mode
の相対値として振る舞います。
caption-sideに指定できる値
- top
- キャプションを表の上側に配置します。これが初期値です。
- bottom
- キャプションを表の下側に配置します。
- block-start
- キャプションを表のブロック方向に対して先頭に配置します。
- block-end
- キャプションを表のブロック方向に対して末尾に配置します。
- inline-start
- キャプションを表のインライン方向に対して先頭に配置します。
- inline-end
- キャプションを表のインライン方向に対して末尾に配置します。
caption-sideの使い方とサンプル
caption-side
プロパティの構文は以下の通りです。
CSS
/* 配置位置 */
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;
break-afterの実例
それでは実際にcaption-side
プロパティの書き方を見ていきましょう。最初の例は、単純にキャプションの配置方向を示した場合の挙動です。キャプションの位置指定は、<caption>
そのものに対して行います。
表示確認
CSS
.samp_box {
overflow: auto;
padding: 0 1rem 1rem;
}
.samp_box > table {
margin: 1rem 0 0;
border: 1px solid #999;
border-collapse: collapse;
text-align: center;
}
table th,
table td {
padding: .2rem .5rem;
border: 1px solid #999;
}
table th {
background: #eee;
}
#cap_1 > caption {
caption-side: top;
}
#cap_2 > caption {
caption-side: bottom;
}
HTML
<section class="samp_box">
<table id="cap_1">
<caption>caption-side: top;</caption>
<tr>
<th>th</th>
<th>th</th>
<th>th</th>
</tr>
<tr>
<td>セル A-2</td>
<td>セル B-2</td>
<td>セル C-2</td>
</tr>
<tr>
<td>セル A-3</td>
<td>セル B-3</td>
<td>セル C-3</td>
</tr>
</table>
<table id="cap_2">
<caption>caption-side: bottom;</caption>
<tr>
<th>th</th>
<th>th</th>
<th>th</th>
</tr>
<tr>
<td>セル A-2</td>
<td>セル B-2</td>
<td>セル C-2</td>
</tr>
<tr>
<td>セル A-3</td>
<td>セル B-3</td>
<td>セル C-3</td>
</tr>
</table>
</section>
続いて、writing-mode
を併記した場合の挙動を示します。キャプションの表示位置を上記と同じにしたまま、最初の表にvertical-lr
を、二番目の表にvertical-rl
を与えると、どのように表示されるでしょうか。
表示確認
caption-sideに関連するCSSプロパティ
テーブル(table)関連 | |
---|---|
border-collapse | 表のセル同士が隣接する境界線を共有するか分離するかを指定する |
border-spacing | 表に含まれるセル同士の間隔を指定する |
caption-side | 表(テーブル)のキャプションの位置を指定する |
empty-cells | 空白セルのボーダーの表示・非表示を指定する |
table-layout | 表(テーブル)のレイアウトに使用されるアルゴリズムを指定する |