caption-side
**caption-side
** CSS 属性将表格的 <caption>
内容放置在指定的侧边。这些值相对于表格的 writing-mode
。
试试看
语法
css
/* Directional values */
caption-side: top;
caption-side: bottom;
/* Global values */
caption-side: inherit;
caption-side: initial;
caption-side: revert;
caption-side: revert-layer;
caption-side: unset;
caption-side
属性被指定为以下列出的关键字值之一。
值
注意: CSS 逻辑属性和值 模块定义了两个逻辑值,inline-start
和 inline-end
,分别用于将标题框定位在表格的内联开始边缘和内联结束边缘。这些值在任何浏览器中都不受支持。
正式定义
正式语法
top |
bottom
示例
在上面和下面设置标题
HTML
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
css
.top caption {
caption-side: top;
}
.bottom caption {
caption-side: bottom;
}
table {
border: 1px solid red;
}
td {
border: 1px solid blue;
}
结果
规范
规范 |
---|
级联样式表级别 2 修订版 2 (CSS 2.2) 规范 # propdef-caption-side |
CSS 逻辑属性和值级别 1 # caption-side |
浏览器兼容性
BCD 表格仅在浏览器中加载
另请参阅
<caption>
- CSS 表格 模块
- CSS 逻辑属性和值 模块