Tailwind CSS home page
  1. 表格
  2. 字幕端

Quick reference

Class
Properties
caption-topcaption-side: top;
caption-bottomcaption-side: bottom;

基本用法

¥Basic usage

顶部

¥Top

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

¥Use caption-top to position a caption element at the top of a table.

Table 3.1: Professional wrestlers and their signature moves.
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>

底部

¥Bottom

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

¥Use caption-bottom to position a caption element at the bottom of a table.

Table 3.1: Professional wrestlers and their signature moves.
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>

有条件地应用

悬停、聚焦和其他状态

Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:caption-bottom to only apply the caption-bottom utility on hover.

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

For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.

断点和媒体查询

You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:caption-bottom to apply the caption-bottom utility at only medium screen sizes and above.

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

To learn more, check out the documentation on Responsive Design, Dark Mode and other media query modifiers.