应调整边框、文字、背景色组合以提升对比度，优先用开发者工具检查计算样式，避免半像素渲染问题，推荐box-shadow模拟边框并采用柔和底色。
data-grid 边框变灰后文字看不清怎么办
边框颜色设太深或太浅，都会让 data-grid 里的文字失去对比度，尤其在密集单元格里，眼睛容易累。不是调个 border-color 就完事——得同步检查 color、background-color 和 opacity 的组合效果。
- 用浏览器开发者工具选中单元格，看实际生效的
computed样式，别只信 CSS 文件里的声明 - 避免直接改
border: 1px solid #ccc后发现所有边线都糊成一片：这是border-collapse: collapse+ 半像素渲染导致的，换成border-collapse: separate并加border-spacing: 0更可控 - 深色底色配浅灰边框（如
#333背景 +#555边框）比纯黑+白边更护眼，也减少视觉抖动
Ant Design 的 Table 组件怎么覆盖默认边框样式
Ant Design 的 Table 默认用 border-collapse: collapse，且大量样式通过 td/th 的嵌套类名控制，直接写 .ant-table-tbody td { border: 1px solid #e0e0e0 } 很可能被权重更高的内联或组件级样式覆盖。
- 必须用
!important，但只加在关键属性上，比如border-color !important，而不是整条规则 - 推荐在主题文件里通过
token覆盖：修改components: { Table: { cellPaddingBlock: 8, cellPaddingInline: 12, borderColor: '#d0d0d0' } } - 如果用了
scroll={{ x: true }}，横向滚动时右侧边框常被裁掉——这是overflow: hidden截断了border-right，需给容器加padding-right: 1px补偿
React + Tailwind 中 data-grid 底色不随行悬停变化
Tailwind 默认不提供行悬停背景切换逻辑，单纯写 hover:bg-gray-50 在 tr 上可能无效，因为 td 自带背景会盖住它；另外，某些数据网格库（如 TanStack Table）生成的是扁平 div 布局，不是语义化表格，:hover 选择器根本没作用对象。
- 确认结构：用开发者工具看实际 DOM 是
table > tr > td还是div[data-row]，前者用tr:hover td，后者得绑定onMouseEnter手动切 class - 底色别用纯白（
#fff），改用#fcfcfc或rgb(252,252,252)，能明显降低眩光感 - 悬停时只变背景，别同时改边框色——否则触发重排，密集表格滚动会卡顿
Chrome 浏览器下 data-grid 边框出现 1px 锯齿或虚化
这不是 bug，是 subpixel rendering 在高 DPI 屏幕或缩放比例非 100% 时的正常表现。当边框宽度为 1px 且颜色与背景对比不足时，浏览器会自动做抗锯齿，结果就是“发虚”。
- 把
border-width改成1.2px或thin（部分浏览器解析为 1.2px），比死守1px更稳 - 禁用抗锯齿？别试。CSS 的
-webkit-font-smoothing对边框无效，强行用transform: translateZ(0)可能引发其他渲染异常 - 最可靠的做法：换用
box-shadow: inset 0 0 0 1px #ddd模拟边框，它不受 subpixel 影响，且支持圆角
边框和底色不是独立调整项，它们永远在争夺用户注意力。改一个值前，先在真实数据密度（比如 50 行 × 12 列）下滚动两遍，看眼睛哪块最先发酸——那里就是该动刀的地方。
