CSS 中 caption-side
属性会将表格的标题<caption>
放到规定的位置。但是具体显示的位置与表格的 writing-mode
属性值有关。
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
语法
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 | 初始版本。 |
浏览器兼容性
BCD tables only load in the browser
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.