表格
caption-side
用于控制表格内标题元素对齐方式的实用工具。
| 类 | 样式 |
|---|---|
caption-top | caption-side: top; |
caption-bottom | caption-side: bottom; |
示例
放置在表格顶部
使用 caption-top 实用工具将标题元素定位在表格顶部
| 摔跤手 | 招牌动作 |
|---|---|
| “冷石”史蒂夫·奥斯汀 | 冷石断头台，Lou Thesz 压制 |
| 布雷特“杀手”哈特 | 神射手固定 |
| 剃刀雷蒙 | 剃刀边缘，落摔 |
<table> <caption class="caption-top"> Table 3.1: Professional wrestlers and their signature moves. </caption> <thead> <tr> <th>Wrestler</th> <th>Signature Move(s)</th> </tr> </thead> <tbody> <tr> <td>"Stone Cold" Steve Austin</td> <td>Stone Cold Stunner, Lou Thesz Press</td> </tr> <tr> <td>Bret "The Hitman" Hart</td> <td>The Sharpshooter</td> </tr> <tr> <td>Razor Ramon</td> <td>Razor's Edge, Fallaway Slam</td> </tr> </tbody></table>放置在表格底部
使用 caption-bottom 实用工具将标题元素定位在表格底部
| 摔跤手 | 招牌动作 |
|---|---|
| “冷石”史蒂夫·奥斯汀 | 冷石断头台，Lou Thesz 压制 |
| 布雷特“杀手”哈特 | 神射手固定 |
| 剃刀雷蒙 | 剃刀边缘，落摔 |
<table> <caption class="caption-bottom"> Table 3.1: Professional wrestlers and their signature moves. </caption> <thead> <tr> <th>Wrestler</th> <th>Signature Move(s)</th> </tr> </thead> <tbody> <tr> <td>"Stone Cold" Steve Austin</td> <td>Stone Cold Stunner, Lou Thesz Press</td> </tr> <tr> <td>Bret "The Hitman" Hart</td> <td>The Sharpshooter</td> </tr> <tr> <td>Razor Ramon</td> <td>Razor's Edge, Fallaway Slam</td> </tr> </tbody></table>响应式设计
前缀a caption-side 实用工具 使用诸如 md: 之类的断点变体，仅在中等 屏幕尺寸及以上应用该实用工具
<caption class="caption-top md:caption-bottom ..."> <!-- ... --></caption>在变体文档中了解有关使用变体的更多信息。
