1. 表格
  2. caption-side

表格

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:

Table 3.1: Professional wrestlers and their signature moves.
WrestlerSignature Move(s)
"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>

放置在表格底部(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:

Table 3.1: Professional wrestlers and their signature moves.
WrestlerSignature Move(s)
"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>

响应式设计(Responsive design)

¥Responsive design

caption-side 工具前面使用断点变体如 md: 仅在 medium 屏幕尺寸及以上时应用工具:

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

请参阅 变体文档 详细了解如何使用变体。

TailwindCSS v4.0 中文网 - 粤ICP备13048890号