caption-side

CSS描述:

CSS caption-side 属性会将表格的标题<caption> 放到规定的位置。但是具体显示的位置与表格的 writing-mode 属性值有关。

语法

 caption-side 属性的取值必须是下面所列值中的一个。

CSS

/* Directional values */ 
caption-side: top; 
caption-side: bottom; 

/* Warning: non-standard values */ 
caption-side: left; 
caption-side: right; 
caption-side: top-outside; 
caption-side: bottom-outside; 

/* Global values */ 
caption-side: inherit; 
caption-side: initial; 
caption-side: unset;

取值

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规范中对 top 值产生的效果有不同的定义,在未来可能会重新定义这个值产生的影响效果。

示例

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
Editor's Draft

定义和css定义的书写模式值相关的顶部及底部的值。

CSS Level 2 (Revision 1)
caption-side
Recommendation 初始版本

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
caption-sideChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 8Opera Full support 4Safari Full support 1WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 4Opera Android ? Safari iOS Full support 1Samsung Internet Android ?
Non-standard values left, right, top-outside, and bottom-outside
Non-standard
Chrome No support NoEdge No support NoFirefox Full support 1IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support 4Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
top and bottom are relative to the writing-mode value
Experimental
Chrome No support NoEdge No support NoFirefox Full support 42IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support 42Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
Non-standard. Expect poor cross-browser support.
Non-standard. Expect poor cross-browser support.