border-style: hidden 不仅隐藏边框，还会强制优先级高于其他边框声明（包括 !important），导致后续 border-right-style: solid !important 无法生效；解决方法是统一使用 border-right: 1px solid black !important 并显式重置 border-style。
css 中 `border-style: hidden` 不仅隐藏边框，还会强制优先级高于其他边框声明（包括 `!important`），导致后续 `border-right-style: solid !important` 无法生效；解决方法是统一使用 `border-right: 1px solid black !important` 并显式重置 `border-style`。
在 CSS 表格布局中，border-style: hidden 是一个常被误解的值。它并非简单的“视觉隐藏”，而是具有边框冲突解决（border conflict resolution）语义：当 border-collapse: collapse 启用时，hidden 会主动参与边框优先级计算，并强制覆盖相邻单元格的任何边框样式，即使后者使用了 !important。这就是为什么你在 .tl_date 上设置 border-right-style: solid !important 依然无效的根本原因——hidden 在表格边框合并算法中拥有最高裁决权。
✅ 正确做法是避免混用 hidden 与局部边框覆盖，而应采用更明确、更可控的声明方式：
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#timeline {
border-collapse: collapse;
width: 100%;
}
/* 移除全局 hidden —— 改用 transparent 或 none 更安全 */
#timeline td {
border: 1px solid transparent; /* 或 border: none */
padding: 10px;
}
#timeline td.tl_date {
padding-right: 10px;
border-right: 1px solid black !important; /* ✅ 单条边框完整声明 */
}
⚠️ 注意事项：
-
border-style: hidden仅在border-collapse: collapse模式下有特殊语义，在separate模式下等同于none； - 使用
border: 1px solid transparent替代hidden可保留盒模型尺寸一致性，同时支持后续精准覆盖； - 若必须保留
hidden（如兼容旧逻辑），则需对目标单元格同时重置所有相关边框属性：#timeline td.tl_date { border-style: solid; /* 必须重置整体 border-style */ border-width: 0 1px 0 0; /* 仅保留右侧边框宽度 */ border-color: transparent black transparent transparent; }
总结：hidden 是 CSS 表格边框的“强屏蔽指令”，不是普通样式值。在需要精细控制单侧边框的场景中，应优先选用 border: ... 简写语法或 transparent 配合明确的 border-* 属性，确保样式可预测、可覆盖、可维护。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
