必须设 border-collapse: collapse 以消除边框间隙，再用 td, th { border-bottom: 1px solid #e0e0e0; } 实现单侧分隔，末行通过 tbody tr:last-child td, th { border-bottom: none; } 去除冗余边框，并确保边框色与背景对比度足够。
隔行不换色但靠边框区分，本质是放弃 background-color，转用 border 做视觉分隔
直接给 tr 或 td 设背景色会干扰“不换色”需求，真正起作用的是边框的粗细、颜色或留白。关键不是“怎么加边框”，而是“怎么让边框成为唯一区分手段”。默认表格在 border-collapse: separate 模式下，border-spacing 会产生空白间隙，这反而削弱了边框的分隔感——所以必须先统一控制边框模型。
必须设 border-collapse: collapse，否则边框分隔效果断裂
不设这个，哪怕每个 td 都有 border-bottom: 1px solid #eee，也会因默认的 border-spacing: 2px 导致行与行之间出现白色缝隙，视觉上像“断开的线”，根本起不到分隔作用。
-
table元素必须显式加style="border-collapse: collapse;"（或 CSS 规则） - 所有参与分隔的边框都要定义
border-style和border-width，只写border-color无效 - 推荐统一用
td, th { border-bottom: 1px solid #e0e0e0; }，比在tr上设border-bottom更可靠（tr的边框不渲染在单元格内容区外缘）
用单侧边框 + padding 实现干净的行间线，避免视觉臃肿
如果每条边都加边框，表格会显得厚重；只保留 border-bottom 是最轻量、最常用的行区分方式。但要注意：最后一行不该有底部边框，否则多出一条无意义的线。
- 写
td, th { border-bottom: 1px solid #e0e0e0; padding: 12px 16px; } - 用
tbody tr:last-child td, tbody tr:last-child th { border-bottom: none; }去掉末行底边 - 别依赖
:last-of-type，某些框架可能往tbody插入空行或加载占位符，:last-child更稳妥 - 如果表头也需要与第一行数据之间有分隔，单独给
thead th加border-bottom，别复用上面那条规则
边框颜色太浅或对比度不足时，用户根本看不出区分
常见错误是用 #f5f5f5 这类近白灰作边框色，在多数屏幕上几乎不可见。这不是样式没生效，而是人眼分辨不出。
- 检查实际渲染：打开浏览器开发者工具，选中一个
td，看 computed 样式里border-bottom是否为1px solid rgb(...) - 推荐最小可用对比度：边框色至少比背景色深 20% 以上，例如背景白（#fff）时，边框用 #ddd 或 #ccc
- 若表格背景非纯白（比如浅灰主题），边框色需相应调深，不能硬套同一色值
- 移动端小字号下，1px 边框可能被缩放模糊，可考虑
border-bottom: 0.5px solid #ccc（部分浏览器支持）或改用box-shadow: 0 1px 0 #eee模拟细线
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
