Tailwind CSS - 表格

Tailwind CSS - 表格样式

有效样式化表格对于清晰呈现表格数据至关重要。Tailwind CSS 提供了一套工具类，用于控制表格布局、边框、间距等，使你能够构建现代、响应式且可访问的数据表格。

核心表格工具类

以下是样式化表格的关键工具类。它们通常组合使用以实现所需的外观和行为。

工具类组	描述
边框合并	使用 border-collapse（现代，共享边框）或 border-separate（边框之间有空间）。
边框间距	使用 border-spacing-x-{amount} 和 border-spacing-y-{amount} 来控制单元格之间的空间。仅适用于 border-separate。
表格布局	使用 table-auto（列适应内容）或 table-fixed（列具有固定且相等的宽度）。table-fixed 通常在性能和可预测布局方面更优。
标题位置	使用 caption-top 或 caption-bottom 来控制 <caption> 元素的位置，这对于可访问性很重要。

迷你项目：构建一个现代、响应式的数据表格

让我们从头开始构建一个用户数据表格，应用现代样式并使其适应移动设备。

步骤 1：基本结构和样式

我们将从 table-fixed 布局、全宽和清晰的行分隔符开始。

<div class="overflow-x-auto rounded-lg shadow-md">
  <table class="w-full table-fixed text-sm text-left text-slate-500">
    <caption class="p-5 text-lg font-semibold text-left text-slate-900 bg-white">
      Our Users
      <p class="mt-1 text-sm font-normal text-slate-500">Browse a list of users in our system.</p>
    </caption>
    <thead class="text-xs text-slate-700 uppercase bg-slate-100">
      <tr>
        <th scope="col" class="px-6 py-3 w-1/3">Name</th>
        <th scope="col" class="px-6 py-3 w-1/3">Role</th>
        <th scope="col" class="px-6 py-3 w-1/3">Status</th>
      </tr>
    </thead>
    <tbody class="divide-y divide-slate-200">
      <tr class="bg-white hover:bg-slate-50">
        <td class="px-6 py-4 font-medium text-slate-900">Jane Doe</td>
        <td class="px-6 py-4">Administrator</td>
        <td class="px-6 py-4 text-green-600">Active</td>
      </tr>
      <tr class="bg-white hover:bg-slate-50">
        <td class="px-6 py-4 font-medium text-slate-900">John Smith</td>
        <td class="px-6 py-4">Developer</td>
        <td class="px-6 py-4 text-green-600">Active</td>
      </tr>
      <tr class="bg-white hover:bg-slate-50">
        <td class="px-6 py-4 font-medium text-slate-900">Alex Ray</td>
        <td class="px-6 py-4">Designer</td>
        <td class="px-6 py-4 text-red-600">Inactive</td>
      </tr>
    </tbody>
  </table>
</div>

步骤 2：添加斑马条纹

斑马条纹（交替行颜色）可以提高可读性。Tailwind 通过 odd: 和 even: 变体使其变得容易。

<!-- 在你的 tbody 中... -->
<tbody class="divide-y divide-slate-200">
  <!-- 只需将奇/偶背景颜色类添加到 <tr> 元素 -->
  <tr class="odd:bg-white even:bg-slate-50 hover:bg-blue-100">
    <!-- ... -->
  </tr>
  <tr class="odd:bg-white even:bg-slate-50 hover:bg-blue-100">
    <!-- ... -->
  </tr>
</tbody>

最佳实践：使表格响应式

传统表格在小屏幕上处理起来臭名昭著地困难。一种常见的现代模式是在移动设备上将表格转换为卡片式布局。我们可以通过响应式工具类来实现这一点。

策略是在移动设备上隐藏 <thead>，并将 <td> 元素的显示更改为 block，使用伪元素添加标签。这需要一些自定义 CSS，你可以将其添加到你的主样式表中。

响应式 CSS

/* 将此代码添加到你的主 CSS 文件中（例如 style.css） */
@media (max-width: 768px) {
  .responsive-table thead {
    display: none;
  }
  .responsive-table tr {
    display: block;
    margin-bottom: 1rem;
    border-bottom: 2px solid #ddd;
  }
  .responsive-table td {
    display: block;
    text-align: right;
    border-bottom: 1px dotted #ccc;
  }
  .responsive-table td::before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;
  }
}

响应式 HTML 结构

将 responsive-table 类添加到你的表格中，并将 data-label 属性添加到你的 <td> 元素中。

<table class="w-full text-sm responsive-table">
  <!-- ... thead ... -->
  <tbody>
    <tr>
      <td data-label="Name" class="px-6 py-4 font-medium text-slate-900">Jane Doe</td>
      <td data-label="Role" class="px-6 py-4">Administrator</td>
      <td data-label="Status" class="px-6 py-4 text-green-600">Active</td>
    </tr>
    <!-- ... 更多行 ... -->
  </tbody>
</table>

可访问性是关键

• 始终使用 <caption>：它为表格提供了程序化标题。
• 使用 <thead> 和 <th>：正确标识表格标题。
• 为 <th> 元素添加 scope="col" 或 scope="row"：这明确告诉屏幕阅读器标题是应用于列还是行，这对于理解数据关系至关重要。