Tailwind CSS 核心语法篇 六：表格

6. 表格 (Tables)

表格是展示结构化数据的核心组件。虽然在现代 Web 设计中，许多布局任务已由 Flexbox 和 Grid 接管，但对于真正的表格数据（如用户列表、财务报告、功能对比等），<table> 元素仍然是最佳选择。Tailwind 提供了专门的工具来控制表格的布局和样式，使其既美观又易读。

6.1 核心布局决策 (Layout Decisions)

在开始为表格添加样式之前，你需要做出两个关键的布局决策：边框是合并还是分离，以及列宽是自动计算还是固定。

6.1.1 边框模式: border-collapse vs. border-separate

这决定了单元格边框的行为方式。

类名说明适用场景
border-collapse合并边框 (推荐)相邻单元格的边框会合并为一条更细的单线。这是最常见、最简洁的现代表格样式。
border-separate分离边框每个单元格都拥有自己独立的边框，单元格之间会有间距。

6.1.2 列宽算法: table-auto vs. table-fixed

这决定了浏览器如何计算表格的列宽。

类名说明适用场景
table-auto自动列宽 (默认)浏览器会根据每列中最宽的内容来确定列宽。布局灵活但性能稍差。
table-fixed固定列宽 (推荐)表格和列的宽度由你设置的宽度决定（例如 w-1/2），内容超出部分会被截断或换行。性能更好，布局更可预测。

代码范例：一个采用 table-fixed 和 border-collapse 的基础表格结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Table Layout</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body class="p-8 bg-slate-100">
    <div class="w-full max-w-2xl mx-auto bg-white p-4 rounded-lg shadow">
      <!-- 
        table-fixed: 列宽由 th 上的 w-* 类决定，而不是内容。
        border-collapse: 单元格之间的边框合并为一条。
      -->
      <table class="table-fixed border-collapse w-full">
        <thead>
          <tr>
            <th class="w-1/2 border p-2 text-left">Title</th>
            <th class="w-1/4 border p-2 text-left">Author</th>
            <th class="w-1/4 border p-2 text-left">Views</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <!-- 使用 truncate 防止长文本破坏布局 -->
            <td class="border p-2 truncate">A Very Long and Detailed Introduction to Modern CSS Frameworks</td>
            <td class="border p-2">Adam Wathan</td>
            <td class="border p-2">1,200</td>
          </tr>
          <tr>
            <td class="border p-2">Building a Design System</td>
            <td class="border p-2">Sarah Drasner</td>
            <td class="border p-2">980</td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>
</html>

6.2 构建现代化的表格样式

现代数据表格通常遵循“少即是多”的原则，倾向于使用水平分隔线而不是网格线，以获得更干净、更易于阅读的外观。

实现配方:

  1. 移除所有边框，使用 divide-y 在行之间创建水平分隔线。
  2. 为表头 (thead) 设置一个浅色的背景 (bg-slate-50)。
  3. 确保表头文字左对齐 (text-left) 并有合适的字重 (font-medium) 和颜色 (text-slate-700)。
  4. 为所有单元格 (th, td) 添加足够的内边距 (padding)，例如 px-6 py-4。
  5. 为表格行 (tr) 添加一个悬停状态 (hover:bg-slate-50) 以提供视觉反馈。

代码范例：一个简洁的现代数据表格

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Modern Table Styling</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style type="text/tailwindcss">
      @layer components {
        .table-header {
          @apply px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider;
        }
        .table-cell {
          @apply px-6 py-4 whitespace-nowrap;
        }
        .status-badge {
          @apply px-2 inline-flex text-xs leading-5 font-semibold rounded-full;
        }
        .status-active {
          @apply bg-green-100 text-green-800;
        }
        .status-inactive {
          @apply bg-red-100 text-red-800;
        }
      }
    </style>
  </head>
  <body class="p-8 bg-slate-100">
    <div
      class="w-full max-w-4xl mx-auto bg-white rounded-lg shadow overflow-hidden"
    >
      <table class="w-full">
        <thead class="bg-slate-50 border-b border-slate-200">
          <tr>
            <th class="table-header">Name</th>
            <th class="table-header">Title</th>
            <th class="table-header">Status</th>
            <th class="table-header">Role</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-slate-200">
          <tr class="hover:bg-slate-50">
            <td class="table-cell">Jane Cooper</td>
            <td class="table-cell">Regional Paradigm Technician</td>
            <td class="table-cell">
              <span class="status-badge status-active"> Active </span>
            </td>
            <td class="table-cell">Admin</td>
          </tr>
          <tr class="hover:bg-slate-50">
            <td class="table-cell">Cody Fisher</td>
            <td class="table-cell">Product Directives Officer</td>
            <td class="table-cell">
              <span class="status-badge status-inactive"> Inactive </span>
            </td>
            <td class="table-cell">Owner</td>
          </tr>
          <!-- More people... -->
        </tbody>
      </table>
    </div>
  </body>
</html>