HTML表格tr:hover边框与col列边框样式冲突问题咨询

问题根因 #

该冲突是border-collapse: collapse模式下的CSS标准特性，不是浏览器兼容性问题：规范明确规定表格边框优先级从低到高为table < 行组/列组 < 行/列 < 单元格，所以<col>元素设置的边框永远无法覆盖单元格本身的边框样式，即使加!important也不生效。

根本解决方案（无hack） #

放弃使用<col>元素设置边框，改用:nth-child()选择器直接匹配对应列的单元格设置样式，从根源上规避优先级冲突：

调整后的CSS代码 #

table {
  border-collapse: collapse;
  text-align: right;
  cursor: default;
}
th {
  background: #ccc;
  text-align: center;
}
th, td {
  border: 1px solid #fff;
}
.col0 {
  background: #ddd;
}
/* 直接匹配第3列（对应原.col2）的单元格设置左右边框 */
th:nth-child(3),
td:nth-child(3) {
  border-left: 1px solid #000;
  border-right: 1px solid #000;
}
tbody tr:hover td {
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
}
.c0 {
  background: #fff;
}
.c1 {
  background: #f8a;
}
.c2 {
  background: #b3c;
}
.c3 {
  background: #aa6;
}
.c4 {
  background: #cf9;
}
.c5 {
  background: #9dd;
}
.c6 {
  background: #0f8;
}
.c7 {
  background: #44f;
}
.c8 {
  background: #88b;
}

效果验证 #

修改后完全满足所有需求：

• 所有th/td默认边框为1px solid #fff
• 目标列左右边框为1px solid #000
• 行悬停时整行上下边框为1px solid #000

原有HTML代码无需做任何改动。

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