# shadcn Table 样式覆盖技巧

## 背景
调整 robot-manager 列表页表格视觉（行分割线/斑马条/表头），多次发现 shadcn `Table` 组件默认样式不容易整体调。

## 坑
1. shadcn `TableRow` 默认带 `border-b hover:bg-muted/50`，每行一条 1px 分割线在浅底卡片里显得沉；要整排去掉必须用 `!important` 覆盖。
2. 给 `<Table>` 一次性配置所有单元格样式比改组件源码更合适——用 Tailwind 任意选择器 `[&_th]:... [&_td]:...` 在 `className` 上一把子设置。
3. 表格列数多 + 中文内容时，必须给所有 cell 加 `whitespace-nowrap`，否则 CJK 会按字符任意换行撑开行高；然后让 shadcn `Table` 内部自带的 `overflow-auto` 容器去做水平滚动。
4. 外层包裹 `overflow-hidden` 只用于给 `rounded-lg` 裁边角，**不会**干扰内部表格的水平滚动条——因为 shadcn 的 `Table` 实际是 `<div class="relative w-full overflow-auto"><table>`，它自己形成了滚动区域。

## 可复用方案（列表页模板）
```tsx
<Table className="
  [&_th]:h-11 [&_th]:px-3 [&_th]:whitespace-nowrap [&_th]:text-xs [&_th]:font-semibold
  [&_td]:py-2.5 [&_td]:px-3 [&_td]:whitespace-nowrap
  [&_tbody_tr]:!border-0
  [&_tbody_tr:nth-child(even)]:bg-[#fafbfc]
">
  <TableHeader className="bg-[#f7f8fa] [&_tr]:border-b [&_tr]:border-[#ebedf0]">
    ...
  </TableHeader>
  ...
</Table>
```

中文长列用 `max-w-[140px] truncate` 截断：
```tsx
<TableCell>
  <span className="block max-w-[140px] truncate">{longChineseName}</span>
</TableCell>
```

## 何时用
任何 FFOA 内基于 shadcn Table 做数据列表且：
- 列数 ≥ 8
- 单元格含中文内容
- 需要卡片式视觉（行分割线显得脏）

## 何时不用
- 简单 3-4 列静态表格，默认样式够用
- 需要保留行分割线的稠密表格（比如财务明细）