DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 $200 免费信用额度！
CSS 中的 caption-side 属性允许您定义 HTML 的 <caption> 元素的位置，该元素用于 HTML 表格标题。此属性也可以应用于任何 display 属性设置为 caption-side 的元素。
table {
caption-side: top;
}语法
caption-side: top | bottom | block-start | block-end | inline-start | inline-end- 初始值:
top - 应用于: table-caption 元素
- 继承: 是
- 计算值: 如指定
- 动画类型: 离散
值
/* Directional values */
caption-side: top;
caption-side: bottom;
/* Logical values */
caption-side: block-start;
caption-side: block-end;
caption-side: inline-start;
caption-side: inline-end;
/* Global values */
caption-side: inherit;
caption-side: initial;
caption-side: revert;
caption-side: unset;top: 默认值。将标题定位在表格的顶部。bottom: 将标题定位在表格的底部。block-start: 将标题定位在表格在块方向上的起始边缘。block-end: 将标题定位在表格在块方向上的结束边缘。inline-start: 将标题定位在表格在内联方向上的起始边缘。inline-end: 将标题定位在表格在内联方向上的结束边缘。inherit: 表示该值从其父元素的caption-side值继承
caption-side 属性可以应用于 <table> 元素或 <caption> 元素，效果相同。虽然此属性会影响整个标题框的位置（标题的 display 值计算为 table-caption），但它不会影响框内文本的对齐方式。框内文本可以使用 text-align 属性对齐。
请注意，caption-side 的上述值相对于表格的 writing-mode。例如，如果表格设置为垂直书写模式，那么 top 和 bottom 值将相对于表格的方向。
caption-side 的示例
下面的演示包含一个“切换”按钮，它在 top 和 bottom 之间切换表格的 caption-side 属性，因此您可以使用包含多行数据的表格查看差异
在下一个演示中，表格的 writing-mode 设置为 vertical-rl。如按钮切换所示，top 和 bottom 值相对于表格的书写模式。
非标准的 Firefox 专有值
Firefox 长期以来一直支持，并且仍然支持 caption-side 的四个非标准值
left: 将标题定位在表格的左侧。right: 将标题定位在表格的右侧。top-outside: 将标题定位在表格的顶部，其尺寸独立于表格bottom-outside: 将标题定位在表格的底部，其尺寸独立于表格
下面的演示仅在 Firefox 中有效，并允许您使用四个按钮设置不同的非标准值
浏览器支持
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 1+ | 1+ | 1+ | 9.2+ | 8+ | 2.1+ | 3.2+ |
上表中的支持指的是对标准 top 和 bottom 值的基本支持。Firefox 还额外支持非标准的 left、right、top-outside 和 bottom-outside 值。没有浏览器支持新的 block-start、block-end、inline-start 和 inline-end 值。