Tailwind CSS V4 表格完全指南（Tables）

表格是后台管理、数据列表、统计页面最常用的组件。Tailwind CSS V4没有内置专门的表格组件，不提供像UI库那样封装好的table样式，而是依靠基础工具类（边框、间距、背景色、hover、圆角）自由组合，灵活实现简约、斑马纹、带hover高亮、可响应的各类表格。

相比V3，V4的优势在于：半透明色彩统一用/百分比、状态变体逻辑一致、可以直接叠加inset-ring、shadow等V4新增特效，还能结合@starting-style、滤镜实现高级交互质感。

本文讲解基础表格结构、斑马纹、hover高亮、响应式横向滚动、圆角卡片式表格、深色适配，附带业务模板、避坑清单，文末提供完整可运行Demo，最后附上专属速查表。

一、表格基础结构与核心工具

原生HTML表格标签：<table>、<thead>、<tbody>、<tr>、<th>、<td>。
我们主要使用这些工具类组合样式：

border：单元格边框
border-collapse：合并单元格边框（表格必备）
px-4 py-3：单元格内边距，控制行高
text-left：文本左对齐
bg-slate-50：表头/斑马行背景
hover:bg-slate-100：鼠标悬浮高亮行
odd:bg-slate-50：奇数行斑马纹
overflow-x-auto：外层容器，实现小屏横向滚动

重点：border-collapse 是表格合并边框的关键，不加会出现双线边框。

二、常用表格样式案例

1. 基础简约表格

基础带边框、表头加深底色，适合绝大多数后台页面。

<div class="overflow-x-auto">
  <table class="w-full border-collapse">
    <thead>
      <tr class="bg-slate-100">
        <th class="border border-slate-200 px-4 py-3 text-left">姓名</th>
        <th class="border border-slate-200 px-4 py-3 text-left">邮箱</th>
        <th class="border border-slate-200 px-4 py-3 text-left">状态</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="border border-slate-200 px-4 py-3">张三</td>
        <td class="border border-slate-200 px-4 py-3">zhangsan@demo.com</td>
        <td class="border border-slate-200 px-4 py-3">正常</td>
      </tr>
      <tr>
        <td class="border border-slate-200 px-4 py-3">李四</td>
        <td class="border border-slate-200 px-4 py-3">lisi@demo.com</td>
        <td class="border border-slate-200 px-4 py-3">禁用</td>
      </tr>
    </tbody>
  </table>
</div>

2. 斑马纹表格（隔行变色）

利用odd:伪类，奇数行设置浅底色，方便长数据阅读。

<tbody>
  <tr class="odd:bg-slate-50 hover:bg-slate-100 transition">
    <td class="border border-slate-200 px-4 py-3">数据</td>
  </tr>
</tbody>

3. 卡片式圆角表格

原生table本身不支持圆角，需要外层容器配合overflow:hidden，实现整体卡片圆角+阴影。

<div class="overflow-x-auto rounded-xl shadow-md border border-slate-200">
  <table class="w-full border-collapse">
    <!-- table内容 -->
  </table>
</div>

4. 响应式适配

表格列数多，移动端屏幕宽度不足，外层套 overflow-x-auto，手机端横向滑动查看全部列，这是表格响应式标准方案。

三、状态、颜色与深色模式

行hover高亮：hover:bg-slate-100 transition，加transition实现平滑变色
状态标签：可以在单元格内搭配圆角、背景色的小标签

<span class="bg-green-100 text-green-700 px-2 py-1 rounded text-sm">启用</span>
<span class="bg-red-100 text-red-700 px-2 py-1 rounded text-sm">停用</span>

深色模式适配，增加dark:前缀

<tr class="bg-white dark:bg-slate-800 odd:bg-slate-50 dark:odd:bg-slate-700 hover:bg-slate-100 dark:hover:bg-slate-600">

四、避坑清单

❌ 忘记写 border-collapse：单元格边框会出现双线条，很难看
❌ 直接给table加rounded-xl：原生table标签不支持圆角，圆角需要写在外层容器
❌ 多列表格不加overflow-x-auto：移动端会挤爆页面，文字重叠
❌ 单元格padding太小：py-3是推荐行高，不要用过小的py-1，可读性差
✅ 斑马纹推荐使用odd:，不要手动写class，维护更简单
✅ 悬浮高亮加上transition，交互更顺滑
✅ 表头文字可以增加font-semibold加粗，区分数据行

五、完整可运行 Demo

实例

Run this code »

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tailwind CSS V4 表格 Demo</title>
  <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<body class="p-6 bg-slate-100">
  <h1 class="text-2xl font-bold mb-6">Tailwind CSS V4 数据表格演示</h1>

  <!-- 外层容器：圆角卡片 + 横向滚动 -->
  <div class="overflow-x-auto rounded-xl shadow-md border border-slate-200 bg-white">
    <table class="w-full border-collapse">
      <thead>
        <tr class="bg-slate-100">
          <th class="border border-slate-200 px-4 py-3 text-left font-semibold">ID</th>
          <th class="border border-slate-200 px-4 py-3 text-left font-semibold">用户名</th>
          <th class="border border-slate-200 px-4 py-3 text-left font-semibold">邮箱</th>
          <th class="border border-slate-200 px-4 py-3 text-left font-semibold">金额</th>
          <th class="border border-slate-200 px-4 py-3 text-left font-semibold">状态</th>
        </tr>
      </thead>
      <tbody>
        <!-- 斑马纹 + hover高亮 -->
        <tr class="odd:bg-slate-50 hover:bg-slate-100 transition">
          <td class="border border-slate-200 px-4 py-3">1</td>
          <td class="border border-slate-200 px-4 py-3">张三</td>
          <td class="border border-slate-200 px-4 py-3">zhangsan@demo.com</td>
          <td class="border border-slate-200 px-4 py-3">128.00</td>
          <td class="border border-slate-200 px-4 py-3">
            <span class="bg-green-100 text-green-700 px-2 py-1 rounded text-sm">正常</span>
          </td>
        </tr>
        <tr class="odd:bg-slate-50 hover:bg-slate-100 transition">
          <td class="border border-slate-200 px-4 py-3">2</td>
          <td class="border border-slate-200 px-4 py-3">李四</td>
          <td class="border border-slate-200 px-4 py-3">lisi@demo.com</td>
          <td class="border border-slate-200 px-4 py-3">256.00</td>
          <td class="border border-slate-200 px-4 py-3">
            <span class="bg-red-100 text-red-700 px-2 py-1 rounded text-sm">禁用</span>
          </td>
        </tr>
        <tr class="odd:bg-slate-50 hover:bg-slate-100 transition">
          <td class="border border-slate-200 px-4 py-3">3</td>
          <td class="border border-slate-200 px-4 py-3">王五</td>
          <td class="border border-slate-200 px-4 py-3">wangwu@demo.com</td>
          <td class="border border-slate-200 px-4 py-3">512.00</td>
          <td class="border border-slate-200 px-4 py-3">
            <span class="bg-amber-100 text-amber-700 px-2 py-1 rounded text-sm">待审核</span>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</body>
</html>

总结

Tailwind CSS V4 表格没有预制组件，完全靠基础工具类自由拼装。核心要点：外层overflow-x-auto实现移动端滚动，table添加border-collapse合并边框；斑马纹用odd:，hover行高亮提升可读性；圆角卡片写在外层容器，不要直接给table设置rounded。灵活组合边框、阴影、颜色，就能快速搭建后台各类数据表格。

Tailwind CSS V4 表格 Tables 速查表

一、表格核心工具类

工具类	说明
`border-collapse`	合并单元格边框，消除双线边框（必备）
`border-separate`	分离边框（很少用于数据表格）
`w-full`	表格宽度100%铺满容器
`overflow-x-auto`	外层容器，移动端横向滚动
`px-4`	单元格水平内边距
`py-3`	单元格垂直内边距，标准行高
`text-left`	文字左对齐（默认）
`text-center`	文字居中
`text-right`	文字右对齐（金额、数字列推荐）
`font-semibold`	表头文字加粗

二、行样式（斑马纹、悬浮）

工具类	说明
`odd:bg-slate-50`	奇数行浅底色，斑马纹
`hover:bg-slate-100`	鼠标悬浮高亮当前行
`transition`	行hover颜色平滑过渡

三、状态标签（单元格内徽章）

<!-- 正常 -->
<span class="bg-green-100 text-green-700 px-2 py-1 rounded text-sm">正常</span>
<!-- 禁用 -->
<span class="bg-red-100 text-red-700 px-2 py-1 rounded text-sm">禁用</span>
<!-- 待审核 -->
<span class="bg-amber-100 text-amber-700 px-2 py-1 rounded text-sm">待审核</span>

四、完整业务模板

<!-- 标准后台表格模板 -->
<div class="overflow-x-auto rounded-xl shadow-md border border-slate-200 bg-white">
  <table class="w-full border-collapse">
    <thead>
      <tr class="bg-slate-100">
        <th class="border border-slate-200 px-4 py-3 text-left font-semibold">标题</th>
      </tr>
    </thead>
    <tbody>
      <tr class="odd:bg-slate-50 hover:bg-slate-100 transition">
        <td class="border border-slate-200 px-4 py-3">数据内容</td>
      </tr>
    </tbody>
  </table>
</div>

五、速记要点

border-collapse 是表格第一必备工具，防止双线边框
圆角不能直接给table，写在外层div
多列表格外层必须加overflow-x-auto，适配手机端横向滑动
数字、金额列推荐 text-right 右对齐
斑马纹使用odd:伪类，不用手动写class，维护更简单

Tailwind CSS 表格