必须配合border-collapse: collapse才能使border-style在表格中正常生效，否则因默认separate模式导致双线、错位、虚线断开；需用border简写统一设置width/style/color，且border-width至少2px才能清晰呈现dashed或dotted效果。
直接用 border-style 切换表格边框样式是可行的，但必须配合 border-collapse: collapse，否则会出现双线、错位、虚线断开等视觉异常——这是绝大多数人踩坑的第一步。
为什么单独设 border-style 在表格里经常失效
因为 HTML 表格默认采用 border-collapse: separate 模式，table、th、td 各自渲染独立边框。哪怕你给 td 设了 border-style: dashed，相邻单元格的虚线段不会对齐，看起来像“错齿”或“断线”，尤其在小字号或高 DPI 屏幕上更明显。
- 只改
th, td { border-style: dotted; }→ 虚线/点线不连贯，左右/上下边框错位 - 没设
border-width→ 大多数浏览器会忽略border-style，边框压根不显示（border-width默认为medium，但部分 UA 重置后可能为0） - 没设
border-color→ 颜色继承自文本色，可能和背景混在一起看不清
border-style 值在表格中的实际表现差异
不是所有 border-style 值在表格中都可靠。实线（solid）最稳定；虚线（dashed）和点线（dotted）受 border-width 影响极大：
-
dashed：当border-width≤ 1px 时，多数浏览器渲染成近似实线或极短划线，看不出“虚”感；建议至少用2px -
dotted：在1px下常被渲染为实线（尤其 Chrome），2px起才稳定出点状；Firefox 对点距控制稍好 -
double、ridge、groove：依赖三维渲染逻辑，在表格中易因border-collapse合并而失真，不推荐用于数据表格 -
hidden：和none不同，它在border-collapse: collapse下能主动参与边框冲突解决（比如隐藏某列边框而不留空隙）
正确切换边框样式的最小可行写法
要让 dashed 或 dotted 在表格里真正“像虚线”，必须同时控制三个属性，并统一应用在 table 和单元格上：
立即学习“前端免费学习笔记（深入）”；
table {
border-collapse: collapse;
}
th, td {
border: 2px dashed #666; /* 不能拆成 border-style + border-width 分开写 */
padding: 8px 12px;
}- 用简写
border而非单独设border-style，避免遗漏width和color - 把
border-collapse: collapse放在table上，不是th或td - 如果只想某列用虚线，可单独选中：
td:nth-child(2) { border-left: 2px dashed #999; border-right: 2px dashed #999; }，但左右边框需成对设置，否则会漏边
真正麻烦的不是怎么写，而是虚线密度不可控——CSS 没有 dash-length 或 gap-size 参数，所有间距由浏览器根据 border-width 自行计算。想精确控制，得用 border-image 或 SVG 背景，那已是另一层复杂度了。
