Tailwind CSS 主页
  1. 表格
  2. 标题侧

快速参考

类
属性
caption-topcaption-side: top;
caption-bottomcaption-side: bottom;

基本用法

顶部

使用 caption-top 将标题元素定位在表格的顶部。

表 3.1：职业摔跤手及其招牌动作。
摔跤手 招牌动作
"冷石" 史蒂夫·奥斯汀 冷石眩晕，卢·泰斯压制
布雷特 "击球手" 哈特 狙击手
剃刀雷蒙 剃刀边缘，后仰摔 
<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 将标题元素定位在表格的底部。

表 3.1：职业摔跤手及其招牌动作。
摔跤手 招牌动作
"冷石" 史蒂夫·奥斯汀 冷石眩晕，卢·泰斯压制
布雷特 "击球手" 哈特 狙击手
剃刀雷蒙 剃刀边缘，后仰摔 
<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>

条件应用

悬停、聚焦和其他状态

Tailwind 允许您使用变体修饰符在不同状态下有条件地应用实用程序类。例如，使用 hover:caption-bottom 仅在悬停时应用 caption-bottom 实用程序。

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

要查看所有可用状态修饰符的完整列表，请查看 悬停、焦点和其他状态 文档。

断点和媒体查询

您还可以使用变体修饰符来定位媒体查询，例如响应式断点、暗模式、 prefers-reduced-motion 等等。例如，使用 md:caption-bottom 仅在中等屏幕尺寸及以上应用 caption-bottom 实用程序。

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

要了解更多信息，请查看有关 响应式设计、暗模式 和 其他媒体查询修饰符 的文档。