caption-side

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

快速参考

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

示例

置于表格顶部

使用 caption-top 工具类，将 caption 元素放在表格顶部：

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

<!-- [!code classes:caption-top] -->
<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 元素放在表格底部：

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

<!-- [!code word:caption-bottom] -->
<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>

响应式设计

使用 md: 等断点变体作为 caption-side 工具类的前缀，即可仅在中等及以上屏幕尺寸下应用该工具类：

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

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