表格是展示结构化数据的最佳方式。在传统 CSS 中，调整表格的边框合并、单元格间距和列宽对齐是非常麻烦的。而在 Tailwind CSS 中，我们只需要几个简单的类名，就能快速设计出专业、美观的表格。
Tailwind CSS 表格类名
在 Tailwind 中，控制表格外观的核心类名主要集中在 “边框合并（border-collapse）” 和 “布局算法（table-layout）” 这两个方面。
1. 边框合并
边框合并相关类名，用于定义相邻单元格的边框是 “合二为一” 还是 “各自独立”。常用的如下表所示。
| 类名 | 对应 CSS | 说明 |
|---|---|---|
| border-separate（默认） | border-collapse: separate; | 不合并边框 |
| border-collapse | border-collapse: collapse; | 合并边框 |
2. 表格布局
表格布局相关类名，用于定义表格如何计算列宽。常用的如下表所示。
| 类名 | 对应 CSS | 说明 |
|---|---|---|
| table-auto（默认） | table-layout: auto; | 自动列宽（由每列内容决定） |
| table-fixed | table-layout: fixed; | 固定列宽 |
Tailwind CSS 表格示例
接下来，我们通过一个简单的例子来讲解一下如何使用 Tailwind CSS 来定义表格效果。
示例 1：Tailwind CSS 自定义表格效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-10 bg-gray-50">
<div class="w-full shadow-lg rounded-xl overflow-hidden">
<table class="w-full border-collapse bg-white">
<thead class="bg-green-500 text-white">
<tr>
<th class="py-3 px-6 text-left">课程</th>
<th class="py-3 px-6 text-left">难度</th>
<th class="py-3 px-6 text-right">价格</th>
</tr>
</thead>
<tbody class="text-gray-600">
<tr class="border-b border-gray-100 hover:bg-green-50 transition-colors">
<td class="py-4 px-6">Vue 快速上手</td>
<td class="py-4 px-6">初级</td>
<td class="py-4 px-6 text-right font-bold">¥69.9</td>
</tr>
<tr class="border-b border-gray-100 hover:bg-green-50 transition-colors">
<td class="py-4 px-6">SQL 快速上手</td>
<td class="py-4 px-6">初级</td>
<td class="py-4 px-6 text-right font-bold">¥59.9</td>
</tr>
<tr class="hover:bg-green-50 transition-colors">
<td class="py-4 px-6">Python 十大项目</td>
<td class="py-4 px-6">中级</td>
<td class="py-4 px-6 text-right font-bold">¥49.9</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>页面效果如下图所示。
分析：
在这个例子中，“border-collapse” 类名用于合并单元格之间的边框，从而确保表头和内容之间的边框是单线的。
Tailwind CSS 表格隔行换色
当表格行数非常多时，为了防止阅读时 “串行”（看错行），我们可以使用 “even:” 或 “odd:” 这两个修饰符实现隔行换色（斑马线）效果。
语法：
<tr class="even:bg-gray-50"></tr>说明：
“even:” 用于定义偶数行，“odd:” 用于定义奇数行。
示例 2：表格隔行换色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body class="p-10">
<table class="w-full border-collapse bg-white shadow-lg rounded-xl overflow-hidden">
<thead class="bg-green-500 text-white">
<tr>
<th class="py-3 px-6 text-left">课程</th>
<th class="py-3 px-6 text-left">难度</th>
<th class="py-3 px-6 text-right">价格</th>
</tr>
</thead>
<tbody class="text-gray-600">
<tr class="border-b border-gray-100 even:bg-green-50 hover:bg-green-50 transition-colors">
<td class="py-4 px-6">Vue 快速上手</td>
<td class="py-4 px-6">初级</td>
<td class="py-4 px-6 text-right font-bold">¥69.9</td>
</tr>
<tr class="border-b border-gray-100 even:bg-green-50 hover:bg-green-50 transition-colors">
<td class="py-4 px-6">SQL 快速上手</td>
<td class="py-4 px-6">初级</td>
<td class="py-4 px-6 text-right font-bold">¥59.9</td>
</tr>
<tr class="border-b border-gray-100 even:bg-green-50 hover:bg-green-50 transition-colors">
<td class="py-4 px-6">Python 十大项目</td>
<td class="py-4 px-6">中级</td>
<td class="py-4 px-6 text-right font-bold">¥49.9</td>
</tr>
<tr class="even:bg-green-50 hover:bg-green-50 transition-colors">
<td class="py-4 px-6">Go 微服务实战</td>
<td class="py-4 px-6">高级</td>
<td class="py-4 px-6 text-right font-bold">¥99.9</td>
</tr>
</tbody>
</table>
</body>
</html>页面效果如下图所示。
分析：
在这个例子中，我们给 tbody 中的每一个 tr 标签都加上了 “even:bg-green-50” 类名。Tailwind CSS 在编译时，会自动判断当前行是奇数行还是偶数行，其中只有排在偶数（第 2、4 行）的 tr，才会被渲染上浅绿色的背景。
