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.

* Some parts of this feature may have varying levels of support.

caption-sideCSS のプロパティで、表 (<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
適用対象表のキャプション要素
継承あり
計算値指定通り
アニメーションの種類離散値

形式文法

caption-side = 
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
# propdef-caption-side
CSS Logical Properties and Values Level 1
# caption-side

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
caption-side
bottom
bottom-outside
Non-standard
left
Non-standard
right
Non-standard
top
top-outside
Non-standard
top and bottom are relative to the writing-mode value

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
In development. Supported in a pre-release version.
In development. Supported in a pre-release version.
No support
No support
Non-standard. Check cross-browser support before using.