border-left 应设在 table 或 th/td 上，取决于目标效果：整表左线设 table 并用 border-collapse: separate；首列单元格左线设 th/td 加 :first-child；单线表格需 border-collapse: collapse 且单元格 border:none。
border-left 能直接给表格元素加左侧单边框，但单独用它容易出错——比如边框重叠、颜色不生效、或根本看不到线。关键不在“能不能设”，而在“设给谁”和“要不要合并”。
border-left 应该设在哪个 HTML 元素上？
你不能只给 <table> 设 <code>border-left 就指望整张表左边有一条线：它只会画在 table 容器最外侧左边缘，而内部 <th> 和 <code><td> 的左边界依然存在，视觉上可能被遮盖或错位。<p>更可靠的做法是明确指定作用对象：</p>
<ul><li>想让整张表左侧有一条独立粗线（不与单元格边框混）→ 设在 <code><table> 上，同时确保 <code>border-collapse: separate（默认值）
<th> 或 <code><td> 上，并配合 <code>:first-child 选择器border-collapse: collapse + 精确控制每个方向为什么 border-left 设了却看不见？
常见原因不是语法错，而是被其他样式覆盖或被边框合并机制吞掉：
-
border-collapse: collapse开启后，<table> 的 <code>border-left会和第一列所有<th>/</th> <td> 的 <code>border-left合并 —— 最终只显示其中最宽/最深的那个，颜色也可能被覆盖 - 没设
border-width或border-style，仅设border-color不生效（border-left是速记属性，三者缺一不可） - 父容器或祖先元素设置了
overflow: hidden，把左侧边框裁掉了 - 用了简写
border-left: 1px solid #000，但单位写成1px而非1px（看似一样，实则某些旧浏览器对空格敏感）
如何用 border-left 实现真正“左侧单边框”的表格？
目标：整张表只有左边一条线，内部无竖线，上下边可选。这不是靠一个属性搞定的，而是组合控制：
table {
border-collapse: collapse;
border-left: 2px solid #333; /* 这条会显示 */
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}
th, td {
border: none; /* 关掉所有单元格自身边框 */
border-right: 1px solid #eee; /* 如果需要右侧分隔线，单独加 */
padding: 8px;
}
注意：border-left 在 <table> 上生效的前提是 <code>th 和 td 没有干扰性的 border-left；否则它们会参与 collapse 合并，结果不可控。
border-left 与其他 border-* 属性混用时的顺序陷阱
border-left 不是孤立存在的，它和 border、border-style 等共用同一套底层规则：
- 如果先写了
border: 1px solid #000，再写border-left: 3px double red，后者会覆盖前者左侧部分 —— 这是预期行为 - 但如果写了
border-left-style: dashed，又写了border-left: 2px solid blue，后者会完全覆盖前者（包括 style），因为border-left是速记，优先级更高 - 避免在同一个选择器里反复写
border-left多次，CSS 解析取最后一次，容易误判
真正难的不是写对一行代码，而是想清楚这条左线到底属于容器、列、还是某几个特定单元格——选错宿主，再调颜色宽度也没用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
