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 表(テーブル)のレイアウトに使用されるアルゴリズムを指定する