Tables

caption-side

用於控制表格內標題元素對齊方式的通用類別。

ClassStyles
caption-top
caption-side: top;
caption-bottom
caption-side: bottom;

範例(Examples)

放置在表格頂部(Placing at top of table)

使用 caption-top 通用類別將標題元素定位在表格頂部:

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)

使用 caption-bottom 通用類別將標題元素定位在表格底部:

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)

caption-side 通用類別前面加上像 md: 這樣的中斷點變體,讓該通用類別只在中型螢幕尺寸及以上時套用:

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

變體文件中了解更多關於使用變體的資訊。

Copyright © 2026 Tailwind Labs Inc.·商標政策(Brand)