1. 表格
  2. caption-side

表格

caption-side

用于控制表格中 caption 元素对齐方式的实用工具。

类名样式
caption-top
caption-side: top;
caption-bottom
caption-side: bottom;

示例

放置在表格顶部

使用 caption-top 实用工具将 caption 元素定位在表格顶部

表 3.1:职业摔跤手及其标志性动作。
摔跤手标志性动作
"Stone Cold" Steve AustinStone Cold Stunner, Lou Thesz Press
Bret "The Hitman" HartThe Sharpshooter
Razor RamonRazor'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>

放置在表格底部

使用 caption-bottom 实用工具将 caption 元素定位在表格底部

表 3.1:职业摔跤手及其标志性动作。
摔跤手标志性动作
"Stone Cold" Steve AustinStone Cold Stunner, Lou Thesz Press
Bret "The Hitman" HartThe Sharpshooter
Razor RamonRazor'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>

响应式设计

前缀a caption-side 实用工具 使用断点变体,例如 md:,仅在以下情况下应用该实用工具中等 屏幕尺寸及以上

<caption class="caption-top md:caption-bottom ...">
<!-- ... -->
</caption>

了解更多关于在变体文档中使用变体的信息。

版权所有 © 2025 Tailwind Labs Inc.·商标政策