必须设置border-collapse: collapse，否则td/th的border-left/right无法生效；需先清空默认边框（border: none），再单独设置单边样式，并确保table显式声明该属性。
只显示竖向边框，必须用 border-collapse: collapse
直接给 td 写 border-left 或 border-right 不生效，几乎全是漏掉了这个前提。浏览器默认是 border-collapse: separate，此时单边边框会被“撑开”或被忽略，尤其在 td 上设置 border-left 时，左侧边缘根本不会渲染出来。
真正起效的链条是：table 必须显式设 border-collapse: collapse → td 和 th 的 border-left/border-right 才能精准作用于物理边缘 → 其他三边需明确设为 none，否则会叠加出意外线条。
-
table { border-collapse: collapse; }是硬性前提，不能靠继承或重置样式覆盖 - 如果用了
border简写（比如border: 1px solid #000），它会覆盖掉单独写的border-left，必须拆开写 -
border-left-style: hidden无效，除非同时指定border-left-width，否则浏览器当没这条规则
td 和 th 的边框要“清零再加”
很多人只写 td { border-left: 2px solid #333; }，结果整张表全是双线或错位边框——因为默认或重置样式里 td 已经有 border: 1px solid #ddd 这类规则，没显式清掉，新规则就叠加上去了。
安全做法是先归零，再按需加：
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
td, th {
border: none; /* 必须显式写，不能省略 */
}
td, th {
border-left: 2px solid #333;
border-right: 1px solid #eee;
}-
border: none要写在所有单边边框之前，否则会被后续规则覆盖 - 如果表格有表头行（
th），也要同步处理，否则第一行竖线会断开 - 避免用
border: 0，它不等价于border: none；0只清宽度，样式和颜色可能残留
控制哪几列显示竖线？优先用 <col> 而非伪类
想让“第2列和第4列有右边框”，用 td:nth-child(2) 很容易错位——只要某行用了 colspan，伪类就失效。更稳的方式是借助 <col> 元素，它天然按列定位，不受行内结构干扰。
HTML 结构示例：
<table> <col></col> <col style="border-right: 2px solid #666;"></col> <col></col> <col style="border-right: 2px solid #666;"></col> <tr><td>A</td><td>B</td><td>C</td><td>D</td></tr> </table>
-
<col>的border-right只在border-collapse: collapse下生效，单独设无效 - 不要指望
<col>控制左边框，它只影响右侧边缘；左侧需靠前一列的border-right或首列的border-left - 如果列数动态生成，
<col>就不好用，此时改用td:first-child+td:nth-child(n+2)组合，但得测试colspan场景
为什么 DevTools 里看到边框却页面不显示？
常见假象：样式面板里 border-left 显示为已计算值，但实际没渲染——多半是父级容器 overflow: hidden 切掉了最外侧像素，或者 box-sizing: content-box 导致边框加在内容之外，把表格撑出了可视区。
- 快速验证：在控制台执行
getComputedStyle(document.querySelector('td')).borderLeftWidth，返回"0px"就说明没生效，不是颜色问题 - 检查 computed 样式里的
border-left-style，如果是hidden但border-left-width是0px，那这条边框就是隐形的 -
border-left在td上生效，依赖其display为table-cell（默认值），如果被改成block或flex，边框行为会完全不同
真正麻烦的不是写哪条 CSS，而是 border-collapse、选择器优先级、以及 border 简写与单边属性之间的覆盖关系这三者怎么咬合。漏掉任意一个，竖向边框就静默消失。
