为指定class的Table应用CSS时border-collapse失效问题

这种情况大概率是以下两个常见问题导致的：

1. border-collapse 的作用对象错误 #

border-collapse 是仅能作用在 <table> 元素上的CSS属性，如果你把它写在了 .lineTableClass td 这类针对单元格的选择器里，浏览器会直接忽略这个规则——因为td元素不支持该属性。

比如错误写法：

/* 无效：border-collapse不能给td设置 */
.lineTableClass td {
  border-collapse: collapse;
  border-style: solid;
}

正确的写法应该是给带类的table元素单独设置：

.lineTableClass {
  border-collapse: collapse;
}
.lineTableClass td {
  border-style: solid;
}

2. 样式被更高优先级的规则覆盖 #

如果你的CSS里存在其他更具体的table选择器（比如 #someId table 或者 div.container table），这些选择器的优先级会高于单纯的 .lineTableClass 类选择器，导致你设置的 border-collapse 被覆盖。

可以通过浏览器开发者工具（F12）检查table元素的computed样式，看border-collapse的最终取值是不是被其他规则覆盖了。如果是，要么提高你的类选择器优先级（比如写成 table.lineTableClass），要么调整样式声明的顺序（把你的类样式写在全局样式之后）。

快速验证方法 #

你可以先在浏览器控制台给目标table手动设置样式：

document.querySelector('.lineTableClass').style.borderCollapse = 'collapse';

如果此时边框合并生效了，就说明是CSS写法的问题，而非JS创建表格的逻辑问题。

内容的提问来源于stack exchange，提问作者arcy