如何正确控制表格TD元素右侧边框的显示与隐藏

以下是几种不需要依赖原有边框颜色、适配任意背景的实现方式：

方案1：通过边框样式/颜色属性直接控制 #

无布局保留需求（隐藏后边框不占空间） #

直接切换border-right-style属性即可，完全不需要关心原有边框颜色：

// 隐藏右侧边框
td.style.borderRightStyle = 'none'
// 显示右侧边框，清空自定义设置自动恢复原有样式
td.style.borderRightStyle = ''

如果原有边框样式不是默认的solid，可以在初始化时把原始样式存在元素自定义属性中备用：

// 初始化存储
td.dataset.originBorderStyle = getComputedStyle(td).borderRightStyle
// 恢复时调用
td.style.borderRightStyle = td.dataset.originBorderStyle

需保留布局占位（隐藏后边框位置留空，不改变单元格宽度） #

直接用transparent作为隐藏状态的颜色，不需要手动读取原有RGB值：

// 隐藏右侧边框，保留占位
td.style.borderRightColor = 'transparent'
// 显示右侧边框，清空自定义设置自动恢复原有颜色
td.style.borderRightColor = ''

方案2：通过边框宽度控制 #

适合需要严格保留布局的场景，通过调整边框宽度实现显示隐藏：

// 初始化存储原有边框宽度
td.dataset.originBorderWidth = getComputedStyle(td).borderRightWidth
// 隐藏
td.style.borderRightWidth = '0'
// 显示
td.style.borderRightWidth = td.dataset.originBorderWidth

方案3：CSS类统一控制（批量操作推荐） #

如果有多个TD需要控制，提前定义通用类，切换类名即可，维护成本更低：

/* 隐藏且不保留占位 */
.border-right-none {
  border-right-style: none !important;
}
/* 隐藏但保留占位 */
.border-right-transparent {
  border-right-color: transparent !important;
}

// 根据状态切换类名
td.classList.toggle('border-right-none', !shouldShow)

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