标题端 | caption-side
该caption-side CSS属性，将一个表的内容<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;
| Initial value | top |
|---|---|
| 应用对象 | table-caption elements |
| 是否可继承 | yes |
| 媒体 | visual |
| 计算值 | as specified |
| 动画类型 | discrete |
| 规范顺序 | the unique non-ambiguous order defined by the formal grammar |
语法
值
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值，该值将由该值在未来的规范中重新引入。
inherit
形式语法
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 Level 1The definition of 'caption-side' in that specification. | Editor's Draft | Defines the top and bottom values as relative to the writing-mode value. |
| CSS Level 2 (Revision 1)The definition of 'caption-side' in that specification. | Recommendation | Initial definition. |
浏览器兼容性
| Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Basic support | 1.0 | (Yes) | 1.0 | 8.0 | 4.0 | 1.0 |
| left, right, top-outside and bottom-outside | No support | No support | (Yes) | No support | No support | No support |
| top and bottom are relative to the writing-mode value | No support | No support | 42 (42) | No support | No support | No support |
| Feature | Android | Edge | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| Basic support | (Yes) | (Yes) | ? | ? | ? | (Yes) |
| left, right, top-outside and bottom-outside | No support | No support | ? | No support | No support | No support |
| top and bottom are relative to the writing-mode value | No support | No support | 42.0 (42) | No support | No support | No support |
