这篇翻译不完整。请帮忙从英语翻译这篇文章

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

/* 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
适用元素table-caption elements
是否是继承属性yes
适用媒体visual
计算值as specified
Animation typediscrete
正规顺序the unique non-ambiguous order defined by the formal grammar

语法

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

取值

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

语法形式

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

显示结果

规范

Specification Status Comment
CSS Logical Properties and Values Level 1
caption-side
Editor's Draft Defines the top and bottom values as relative to the writing-mode value.
CSS Level 2 (Revision 1)
caption-side
Recommendation Initial definition.

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 8Opera Full support 4Safari Full support 1WebView Android Full support YesChrome Android ? Edge Mobile Full support YesFirefox Android Full support 4Opera Android ? Safari iOS Full support YesSamsung Internet Android ?
Non-standard values left, right, top-outside, and bottom-outside
Non-standard
Chrome No support NoEdge No support NoFirefox Full support YesIE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android ? Edge Mobile No support NoFirefox Android Full support YesOpera 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 ? Edge Mobile 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.

文档标签和贡献者

此页面的贡献者: alongite
最后编辑者: alongite,