Html 透明表格单元格边框替代下一个表格单元格的边框颜色

我正在通过单击更改突出显示的表列。当前突出显示是通过5px边框为

完成的。当应用于列内容的边框移动时，会产生错误的UX。我试图通过向所有

添加透明边框来避免这种变化。 问题是：

透明边框覆盖下一个

的突出显示边框规则

我尝试使用

边框折叠：separate；边界间距：0但水平边框与垂直突出显示的边框重叠（不可接受）：


在这里我添加了代码示例-单击列以更改突出显示，单击按钮以切换内容抖动问题与透明度问题


$（'td'）。单击（函数（）{
//$（this.toggleClass（'checkmark-on'）；
var index=$（this.index（）；
如果（索引！==0）{
$（this）.closest（'表'）
.attr（'类'，''）
.addClass（'selected-col-'+索引）；
}
});
var transparencyOn=false；
$（“#透明网格”）。单击（函数（）{
$（'tbody'）.toggleClass（'transparency-demo'）；
transparencyOn=！transparencyOn；
如果（透明）{
$（this.text（'Show content shake issue'）；
}否则{
$（this）.text（'Show transparent border issue'）；
}
});
*{
字体系列：Arial；
}
身体{
填充：20px；
}
.选定列2 tr*：第n个子项（3），
.选定列1 tr*：第n个子项（2），
.selected-col-3 tr*：第n个子项（4）{
左边框：5px实心#1fa3ff！重要；
右边框：5px实心#1fa3ff！重要信息
}
.selected-col-2 tr:n个孩子（1）*:n个孩子（3），
.selected-col-1 tr:n个孩子（1）*:n个孩子（2），
.selected-col-3 tr:n个孩子（1）*:n个孩子（4）{
边框顶部：5px实心#1fa3ff！重要信息
}
.selected-col-2 tr:n最后一个子项（1）*:n子项（3），
.selected-col-1 tr:n最后一个子项（1）*:n子项（2），
.selected-col-3 tr:n最后一个子项（1）*:n子项（4）{
边框底部：5px实心#1fa3ff！重要信息
}
桌子{
边界塌陷：塌陷；
边界：无；
边缘顶部：20px；
}
运输署，
th{
填充：20px；
}
tr：不是（第一个孩子）{
边框顶部：1px实心#dedede；
}
tbody.transparency-demo td{
右边框：5px实心透明；
左边框：5px实心透明；
}
tbody.transparency-demo tr：第一个孩子td{
边框顶部：5px实心透明；
}
a{
边框：1px实心#1fa3ff；
填充：10px；
边界半径：4px；
光标：指针；
利润率：20px；
}

显示透明边界问题
行标题1
内容
内容
内容
行标题2
内容
内容
内容
行标题3
内容
内容
内容
第4行标题
内容
内容
内容
为了避免内容移动，您可以使用它突出显示表列

只需将其设计更改为左右边框即可


$（'td'）。单击（函数（）{
//$（this.toggleClass（'checkmark-on'）；
var index=$（this.index（）；
如果（索引！==0）{
$（this）.closest（'表'）
.attr（'类'，''）
.addClass（'selected-col-'+索引）；
}
});
var transparencyOn=false；
$（“#透明网格”）。单击（函数（）{
$（'tbody'）.toggleClass（'transparency-demo'）；
transparencyOn=！transparencyOn；
如果（透明）{
$（this.text（'Show content shake issue'）；
}否则{
$（this）.text（'Show transparent border issue'）；
}
});
正文{
填充：20px；
}
.selected-col-2 td:n第n个子项（3）：之后，
.selected-col-1 td:n第n个子项（2）：之后，
.selected-col-3 td:n子项（4）：之后{
内容：''；
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
左边框：5px实心#1fa3ff；
右边框：5px实心#1fa3ff；
z指数：-1；
}
.selected-col-2 tr:第一个孩子td:第n个孩子（3）：之后，
.selected-col-1 tr:第一个孩子td:第n个孩子（2）：之后，
.selected-col-3 tr:第一个孩子td:第n个孩子（4）：之后{
边框顶部：5px实心#1fa3ff；
内容：''；
位置：绝对位置；
右：0；
左：0；
排名：0；
}
.selected-col-2 tr:最后一个子项td:第n个子项（3）：之后，
.selected-col-1 tr:最后一个子项td:第n个子项（2）：之后，
.selected-col-3 tr:最后一个子项td:第n个子项（4）：之后{
边框底部：5px实心#1fa3ff；
内容：''；
位置：绝对位置；
右：0；
底部：0；
左：0；
}
桌子{
边界塌陷：塌陷；
边界：无；
边缘顶部：20px；
溢出：隐藏；
}
运输署，
th{
填充：20px；
位置：相对位置；
}
tr：不是（第一个孩子）{
边框顶部：1px实心#dedede；
}
tbody.transparency-demo td{
右边框：5px实心透明；
左边框：5px实心透明；
}
tbody.transparency-demo tr：第一个孩子td{
边框顶部：5px实心透明；
}
a{
边框：1px实心#1fa3ff；
填充：10px；
边界半径：4px；
光标：指针；
利润率：20px；
}

显示透明边界问题
行标题1
内容
内容
内容
行标题2
内容
内容
内容
行标题3
内容
内容
内容
第4行标题
内容
内容
内容
谢谢，如果我找不到覆盖透明度的解决方案，这可能是一个解决办法。好的，我试图编辑此内容，使其与我的问题完全相关，但一些supersmart评论员拒绝了，所以保留原样。谢谢你的帮助，伙计，