caption-side

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

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

尝试一下

语法

css
/* 方向值 */
caption-side: top;
caption-side: bottom;

/* 逻辑值 */
caption-side: block-start;
caption-side: block-end;
caption-side: inline-start;
caption-side: inline-end;

/* 全局值 */
caption-side: inherit;
caption-side: initial;
caption-side: revert;
caption-side: revert-layer;
caption-side: unset;

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

取值

top

标题盒应置于表格上方。

bottom

标题盒应置于表格下方。

block-start

标题盒应置于表格的块首一侧。

block-end

标题盒应置于表格的块末一侧。

inline-start

标题盒应置于表格的行首一侧。

inline-end

标题盒应置于表格的行末一侧。

形式定义

初始值top
适用元素表格标题元素
是否是继承属性
计算值as specified
动画类型离散值

形式语法

caption-side = 
top |
bottom

示例

在上方和下方设置标题

HTML

html
<table class="top">
  <caption>
    表格上方的标题
  </caption>
  <tr>
    <td>一些数据</td>
    <td>又一些数据</td>
  </tr>
</table>

<br />

<table class="bottom">
  <caption>
    表格下方的标题
  </caption>
  <tr>
    <td>一些数据</td>
    <td>又一些数据</td>
  </tr>
</table>

CSS

css
.top caption {
  caption-side: top;
}

.bottom caption {
  caption-side: bottom;
}

table {
  border: 1px solid red;
}

td {
  border: 1px solid blue;
}

结果

规范

Specification
Cascading Style Sheets Level 2
# propdef-caption-side
CSS Logical Properties and Values Level 1
# caption-side

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
caption-side
bottom
bottom-outside
Non-standard
left
Non-standard
right
Non-standard
top
top-outside
Non-standard
top and bottom are relative to the writing-mode value

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
In development. Supported in a pre-release version.
In development. Supported in a pre-release version.
No support
No support
Non-standard. Check cross-browser support before using.