caption-side

caption-side は、表 (<table>) の <caption> の配置位置を指定する CSS プロパティです。

初期値top
適用対象table-caption 要素
継承あり
計算値指定値
アニメーションの種類個別

構文

/* 方向を示す値 */ 
caption-side: top; 
caption-side: bottom; 

/* 警告: 非標準の値 */ 
caption-side: left; 
caption-side: right; 
caption-side: top-outside; 
caption-side: bottom-outside; 

/* グローバル値 */ 
caption-side: inherit; 
caption-side: initial; 
caption-side: unset;

このプロパティの値は、表の writing-mode に対して相対的です。

top
キャプションボックスを表の上に配置することを示すキーワードです。
bottom
キャプションボックスを表の下に配置することを示すキーワードです。
left
キャプションボックスを表の左に配置することを示すキーワードです。
註: この値は CSS 2 で提案されましたが、最終的な CSS 2.1 仕様から削除されており、非標準です。
right
キャプションボックスを表の右に配置することを示すキーワードです。
註: この値は CSS 2 で提案されましたが、最終的な CSS 2.1 仕様から削除されており、非標準です。
top-outside
キャプションボックスを表の上に配置することを示すキーワードです。ただし、キャプションの幅や水平方向の配置は、表の水平方向のレイアウトに束縛されません。
註: CSS 2.1 仕様では、CSS 2 仕様で値 top について異なる動作を説明していたとの注記があります。この動作は将来の仕様書で、この値を使用して再導入する予定です。
bottom-outside
キャプションボックスを表の下に配置することを示すキーワードです。ただし、キャプションの幅や水平方向の配置は、表の水平方向のレイアウトに束縛されません。
註: CSS 2.1 仕様では、CSS 2 仕様で値 bottom について異なる動作を説明していたとの注記があります。この動作は将来の仕様書で、この値を使用して再導入する予定です。

形式構文

top | bottom | block-start | block-end | inline-start | inline-end

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;
}

出力

仕様

仕様書 策定状況 コメント
CSS Logical Properties and Values Level 1
caption-side の定義
編集者草案 top および bottom は、writing-mode の値に対して相対的であることを定義
CSS Level 2 (Revision 1)
caption-side の定義
勧告 最初の定義

ブラウザ実装状況

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
caption-sideChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 8Opera 完全対応 4Safari 完全対応 1WebView Android 完全対応 ≤37Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 14Safari iOS 完全対応 1Samsung Internet Android 完全対応 1.0
Non-standard values left, right, top-outside, and bottom-outside
非標準
Chrome 未対応 なしEdge 未対応 なしFirefox 完全対応 1IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 4Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
top and bottom are relative to the writing-mode valueChrome 未対応 なしEdge 未対応 なしFirefox 完全対応 42IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 42Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
未対応  
未対応
非標準。ブラウザー間の互換性が低い可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。