caption-side - CSS（层叠样式表） 编辑

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.