caption-side

テーブル内の<caption>要素の配置を制御するためのユーティリティ。

クラススタイル

クラス	スタイル
`caption-top`	`caption-side: top;`
`caption-bottom`	`caption-side: bottom;`

caption-top

caption-side: top;

caption-bottom

caption-side: bottom;

例

テーブルの上部に配置

caption-topユーティリティを使用して、<caption>要素をテーブルの上部に配置します

表 3.1：プロレスラーとその得意技。
レスラー	得意技
"Stone Cold" Steve Austin	ストーンコールド・スタナー、ルー・テーズ・プレス
Bret "The Hitman" Hart	シャープシューター
Razor Ramon	レイザーズ・エッジ、フォールアウェイ・スラム

<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>要素をテーブルの下部に配置します

表 3.1：プロレスラーとその得意技。
レスラー	得意技
"Stone Cold" Steve Austin	ストーンコールド・スタナー、ルー・テーズ・プレス
Bret "The Hitman" Hart	シャープシューター
Razor Ramon	レイザーズ・エッジ、フォールアウェイ・スラム

<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>

レスポンシブデザイン

プレフィックスa caption-sideユーティリティ md:のようなブレークポイントバリアントを使用すると、ユーティリティを適用するのはmedium 以上の画面サイズ

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

バリアントの使用方法の詳細については、バリアントのドキュメントを参照してください。

caption-side

例

テーブルの上部に配置

テーブルの下部に配置

レスポンシブデザイン

このページ内