blob: f05be3134d205d6f8bb9b8e18f6d60ad1e7ea2d1 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
|
---
title: caption-side
slug: Web/CSS/caption-side
tags:
- CSS
- CSS 属性
- table
- 参考
- 表格
translation_of: Web/CSS/caption-side
---
<div>{{CSSRef}}</div>
<p><a href="/zh-CN/CSS">CSS </a>中 <strong><code>caption-side</code></strong> 属性会将表格的标题{{HTMLElement("caption")}} 放到规定的位置。但是具体显示的位置与表格的 {{cssxref('writing-mode')}} 属性值有关。</p>
<div>{{EmbedInteractiveExample("pages/css/caption-side.html")}}</div>
<h2 id="语法">语法</h2>
<p> <code>caption-side</code> 属性的取值必须是下面所列值中的一个。</p>
<h3 id="CSS">CSS</h3>
<pre class="brush: 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;
</pre>
<h3 id="取值">取值</h3>
<dl>
<dt><code>top</code></dt>
<dd>标题会出现在表格的上方。</dd>
<dt><code>bottom</code></dt>
<dd>标题会出现在表格的下方。</dd>
<dt><code>left</code> {{non-standard_inline}}</dt>
<dd>标题会出现在表格的左侧。</dd>
<dd>
<div class="note">在CSS 2 阶段，这个值被建议加入到规范中，但是在在最终的CSS 2.1 规范中被移除。它是非标准属性。</div>
</dd>
<dt><code>right</code> {{non-standard_inline}}</dt>
<dd>标题会出现在表格的右侧。</dd>
<dd>
<div class="note">在CSS 2 阶段，这个值被建议加入到规范中，但是在在最终的CSS 2.1 规范中被移除。它是非标准属性。</div>
</dd>
<dt><code>top-outside</code> {{non-standard_inline}}</dt>
<dd>标题会被放置在表格上方，但是标题的宽度和水平对齐方式不受表格水平布局的约束。</dd>
<dd>
<div class="note">在CSS 2.1 规范中提到：CSS 2 规范中对 <code>top</code> 值产生的效果有不同的定义，在未来可能会重新定义这个值产生的影响效果。</div>
</dd>
<dt><code>bottom-outside</code> {{non-standard_inline}}</dt>
<dd>标题会被放置在表格下方，但是标题的宽度和水平对齐方式不受表格水平布局的约束。</dd>
<dd>
<div class="note">在CSS 2.1 规范中提到：CSS 2 规范中对 <code>top</code> 值产生的效果有不同的定义，在未来可能会重新定义这个值产生的影响效果。</div>
</dd>
</dl>
<h2 id="示例">示例</h2>
<h3 id="HTML">HTML</h3>
<pre class="brush: 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>
</pre>
<h3 id="CSS_2">CSS</h3>
<pre class="brush: css">.top caption {
caption-side: top;
}
.bottom caption {
caption-side: bottom;
}
table {
border: 1px solid red;
}
td {
border: 1px solid blue;
}
</pre>
<h3 id="结果">结果</h3>
<p>{{EmbedLiveSample('Example', 'auto', 160)}}</p>
<h2 id="规范">规范</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">规范</th>
<th scope="col">状态</th>
<th scope="col">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ SpecName('CSS Logical Properties', '#caption-side', 'caption-side') }}</td>
<td>{{ Spec2('CSS Logical Properties') }}</td>
<td>
<p>定义和css定义的书写模式值相关的顶部及底部的值。</p>
</td>
</tr>
<tr>
<td>{{ SpecName('CSS2.1', 'tables.html#caption-position', 'caption-side') }}</td>
<td>{{ Spec2('CSS2.1') }}</td>
<td>初始版本。</td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<p>{{Compat("css.properties.caption-side")}}</p>
|
