表格
caption-side
用于控制表格内标题元素的对齐方式的工具。
类 | 样式 |
---|---|
caption-top | caption-side: top; |
caption-bottom | caption-side: bottom; |
示例(Examples)
¥Examples
放置在表格顶部(Placing at top of table)
¥Placing at top of table
使用 caption-top
工具将标题元素定位在表格顶部:
¥Use the caption-top
utility to position a caption element at the top of a table:
Wrestler | Signature Move(s) |
---|---|
"Stone Cold" Steve Austin | Stone Cold Stunner, Lou Thesz Press |
Bret "The Hitman" Hart | The Sharpshooter |
Razor Ramon | Razor's Edge, Fallaway Slam |
<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>
放置在表格底部(Placing at bottom of table)
¥Placing at bottom of table
使用 caption-bottom
工具将标题元素定位在表格底部:
¥Use the caption-bottom
utility to position a caption element at the bottom of a table:
Wrestler | Signature Move(s) |
---|---|
"Stone Cold" Steve Austin | Stone Cold Stunner, Lou Thesz Press |
Bret "The Hitman" Hart | The Sharpshooter |
Razor Ramon | Razor's Edge, Fallaway Slam |
<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>
响应式设计(Responsive design)
¥Responsive design
在 caption-side
工具前面使用断点变体如 md:
仅在 medium 屏幕尺寸及以上时应用工具:
<caption class="caption-top md:caption-bottom ..."> <!-- ... --></caption>
请参阅 变体文档 详细了解如何使用变体。