---
description: 弹窗/抽屉内 Ant Design Table 列对齐规范；完成含明细列表的弹窗后必须检查
globs: src/prototypes/**/*.{tsx,jsx,ts,js}
alwaysApply: false
---

# 弹窗明细表列对齐（防错行）

## 适用场景

Modal、Drawer 内展示明细列表的 `Table`，尤其启用 `scroll.y` 或 `scroll.x` 时。

## 必须遵守

1. **Table 属性**
   - `className={LN_MODAL_DETAIL_TABLE_CLASS}`（来自 `src/common/modalDetailTable.ts`）
   - `tableLayout="fixed"`
   - `scroll.x` 使用 `sumColumnScrollX(columns)`，值为各列 `width` 之和（可 +8~16 预留滚动条）

2. **列定义**
   - **每一列**都必须设置数字 `width`，禁止仅 `ellipsis: true` 而不设宽度
   - 金额列：`align: 'right'` + `className: 'tabular-nums'`
   - 长文本列：`ellipsis: true` + 明确 `width`

3. **样式**
   - 项目已提供 `src/common/modal-detail-table.css`（经 `vehicle-management/style.css` 全局引入）
   - 不要覆盖 `.ant-table-header` / `.ant-table-body` 的 margin 或隐藏 measure-row 的局部 hack，统一用 `ln-modal-detail-table`

## 完成前自检

实现或修改弹窗明细表后，在浏览器中确认：

- [ ] 表头文字与每列首行数据**垂直对齐**（不错行、不整体右偏）
- [ ] 纵向滚动时表头与表体列宽仍一致
- [ ] 金额列右对齐、长文本省略号正常
- [ ] 开发控制台无 `弹窗表格列缺少 width` 警告

## 参考实现

`src/prototypes/payment-records/components/PaymentKpiDetailModal.tsx`