caption-sideプロパティの説明
CSSのcaption-sideプロパティは、表（<table>）の中に記述されたキャプション（<caption>）の表示する位置を指定します。基本的には表の上か下かの二種類から選択することになりますが、厳密にはwriting-modeの相対値として振る舞います。
caption-sideに指定できる値
top- キャプションを表の上側に配置します。これが初期値です。
bottom- キャプションを表の下側に配置します。
inline-start（試験）- キャプションを表のインライン方向に対する先頭に配置します。
inline-end（試験）- キャプションを表のインライン方向に対する末尾に配置します。
block-start（試験）- キャプションを表のブロック方向に対する先頭に配置します。
block-end（試験）- キャプションを表のブロック方向に対する末尾に配置します。
caption-sideの使い方とサンプルコード
caption-sideプロパティの構文は以下の通りです。
/* 配置位置 */
caption-side: top;
caption-side: bottom;
/* インライン方向 */
caption-side: inline-start;
caption-side: inline-end;
/* ブロック方向 */
caption-side: block-start;
caption-side: block-end;
/* グローバル値 */
caption-side: inherit;
caption-side: initial;
caption-side: revert;
caption-side: unset;
break-afterの実例
それでは実際にcaption-sideプロパティの書き方を見ていきましょう。最初の例は、単純にキャプションの配置方向を示した場合の挙動です。キャプションの位置指定は、<caption>そのものに対して行います。
<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>
.samp_box {
overflow: auto;
}
.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;
}
続いて、writing-modeを併記した場合の挙動を示します。キャプションの表示位置を上記と同じにしたまま、最初の表にvertical-lrを、二番目の表にvertical-rlを与えると、どのように表示されるでしょうか。