caption-side

caption-side

控制表格中标题元素对齐的工具。

Class Styles

Class	Styles
`caption-top`	`caption-side: top;`
`caption-bottom`	`caption-side: bottom;`

caption-top

caption-side: top;

caption-bottom

caption-side: bottom;

示例

放置在表格顶部

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

表 3.1：职业摔跤手及其标志性动作。
摔跤手	标志性动作
"石冷" 史蒂夫·奥斯汀	石冷震撼，路·瑟斯压制
布雷特 "杀手" 哈特	锐 shooter 技
剃刀拉蒙	剃刀边缘，落击

<table>
  <caption class="caption-top">
    表 3.1：职业摔跤手及其标志性动作。
  </caption>
  <thead>
    <tr>
      <th>摔跤手</th>
      <th>标志性动作</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>"石冷" 史蒂夫·奥斯汀</td>
      <td>石冷震撼，路·瑟斯压制</td>
    </tr>
    <tr>
      <td>布雷特 "杀手" 哈特</td>
      <td>锐 shooter 技</td>
    </tr>
    <tr>
      <td>剃刀拉蒙</td>
      <td>剃刀边缘，落击</td>
    </tr>
  </tbody>
</table>

放置在表格底部

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

表 3.1：职业摔跤手及其标志性动作。
摔跤手	标志性动作
"石冷" 史蒂夫·奥斯汀	石冷震撼，路·瑟斯压制
布雷特 "杀手" 哈特	锐 shooter 技
剃刀拉蒙	剃刀边缘，落击

<table>
  <caption class="caption-bottom">
    表 3.1：职业摔跤手及其标志性动作。
  </caption>
  <thead>
    <tr>
      <th>摔跤手</th>
      <th>标志性动作</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>"石冷" 史蒂夫·奥斯汀</td>
      <td>石冷震撼，路·瑟斯压制</td>
    </tr>
    <tr>
      <td>布雷特 "杀手" 哈特</td>
      <td>锐 shooter 技</td>
    </tr>
    <tr>
      <td>剃刀拉蒙</td>
      <td>剃刀边缘，落击</td>
    </tr>
  </tbody>
</table>

响应式设计

Prefix a caption-side utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:

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

Learn more about using variants in the variants documentation.

示例

放置在表格顶部

放置在表格底部

响应式设计

目录