Tailwind CSS - 标题位置

Tailwind CSS - 表格标题位置

caption-side 工具类用于控制表格 <caption> 元素的位置，允许你将其放置在表格的上方或下方。

无障碍优先：<caption> 的重要性

在进行样式设置之前，请记住 <caption> 元素具有重要的语义目的：它为表格数据提供标题或摘要。屏幕阅读器利用它来为视障用户提供上下文。务必为你的数据表格包含有意义的标题。caption-side 工具类仅用于视觉呈现。

表格标题位置类

这些工具类控制 caption-side CSS 属性。

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

示例：标题置于顶部（默认且推荐）

使用 caption-top 会将表格标题放置在表格内容的上方。这是表格标题的标准且最直观的放置方式。

<div class="p-8">
  <table class="w-full border-collapse border border-slate-400">
    <caption class="caption-top p-2 text-lg font-semibold text-left text-slate-700 bg-slate-100 dark:text-slate-200 dark:bg-slate-800">
      Q4 Regional Sales Figures
    </caption>
    <thead class="bg-slate-200 dark:bg-slate-700">
      <tr>
        <th class="border border-slate-300 dark:border-slate-600 p-2">Region</th>
        <th class="border border-slate-300 dark:border-slate-600 p-2">Sales (USD)</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="border border-slate-300 dark:border-slate-600 p-2">North America</td>
        <td class="border border-slate-300 dark:border-slate-600 p-2">$1,200,000</td>
      </tr>
      <tr>
        <td class="border border-slate-300 dark:border-slate-600 p-2">Europe</td>
        <td class="border border-slate-300 dark:border-slate-600 p-2">$950,000</td>
      </tr>
    </tbody>
  </table>
</div>

示例：标题置于底部

caption-bottom 工具类将标题移动到表格下方。这对于添加脚注、数据来源或对主要表格内容次要的解释性说明非常有用。

<div class="p-8">
  <table class="w-full border-collapse border border-slate-400">
    <caption class="caption-bottom p-2 text-sm text-center text-slate-500 bg-slate-50 dark:text-slate-400 dark:bg-slate-800">
      Data as of EOD, December 31. All figures are preliminary.
    </caption>
    <thead class="bg-slate-200 dark:bg-slate-700">
      <tr>
        <th class="border border-slate-300 dark:border-slate-600 p-2">Region</th>
        <th class="border border-slate-300 dark:border-slate-600 p-2">Sales (USD)</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="border border-slate-300 dark:border-slate-600 p-2">North America</td>
        <td class="border border-slate-300 dark:border-slate-600 p-2">$1,200,000</td>
      </tr>
      <tr>
        <td class="border border-slate-300 dark:border-slate-600 p-2">Europe</td>
        <td class="border border-slate-300 dark:border-slate-600 p-2">$950,000</td>
      </tr>
    </tbody>
  </table>
</div>