表格
控制表格中标题元素对齐的工具类。
| Class | Styles |
|---|---|
caption-top | caption-side: top; |
caption-bottom | caption-side: bottom; |
使用 caption-top 工具类将标题元素定位于表格顶部：
| 摔跤手 | 招牌动作 |
|---|---|
| “冰冷的石头” 史蒂夫·奥斯汀 | 冰冷的石头惊喜, 路·塞斯压制 |
| 布雷特“杀手”哈特 | 锐射手 |
| 刀锋拉蒙 | 刀锋的边缘, 摔落猛击 |
<table> <caption class="caption-top"> 表 3.1: 职业摔跤手及其招牌动作。 </caption> <thead> <tr> <th>摔跤手</th> <th>招牌动作</th> </tr> </thead> <tbody> <tr> <td>“冰冷的石头” 史蒂夫·奥斯汀</td> <td>冰冷的石头惊喜, 路·塞斯压制</td> </tr> <tr> <td>布雷特“杀手”哈特</td> <td>锐射手</td> </tr> <tr> <td>刀锋拉蒙</td> <td>刀锋的边缘, 摔落猛击</td> </tr> </tbody></table>使用 caption-bottom 工具类将标题元素定位于表格底部：
| 摔跤手 | 招牌动作 |
|---|---|
| “冰冷的石头” 史蒂夫·奥斯汀 | 冰冷的石头惊喜, 路·塞斯压制 |
| 布雷特“杀手”哈特 | 锐射手 |
| 刀锋拉蒙 | 刀锋的边缘, 摔落猛击 |
<table> <caption class="caption-bottom"> 表 3.1: 职业摔跤手及其招牌动作。 </caption> <thead> <tr> <th>摔跤手</th> <th>招牌动作</th> </tr> </thead> <tbody> <tr> <td>“冰冷的石头” 史蒂夫·奥斯汀</td> <td>冰冷的石头惊喜, 路·塞斯压制</td> </tr> <tr> <td>布雷特“杀手”哈特</td> <td>锐射手</td> </tr> <tr> <td>刀锋拉蒙</td> <td>刀锋的边缘, 摔落猛击</td> </tr> </tbody></table>Prefix a caption-side utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:
<caption class="caption-top md:caption-bottom ..."> <!-- ... --></caption>Learn more about using variants in the variants documentation.