border-style: hidden 具有最高优先级的隐藏语义，会彻底抑制边框渲染，即使使用 !important 也无法被后续的 solid 等样式覆盖；解决方法是直接在目标元素上显式重置 border-style 并配合完整边框声明。
`border-style: hidden` 具有最高优先级的隐藏语义，会彻底抑制边框渲染，即使使用 `!important` 也无法被后续的 `solid` 等样式覆盖；解决方法是直接在目标元素上显式重置 `border-style` 并配合完整边框声明。
在 CSS 表格布局中，border-style: hidden 是一个特殊值——它不仅等效于 none，更关键的是：当应用于 border-collapse: collapse 的表格单元格时，hidden 会强制优先消除该边框，且不可被子选择器通过 border-right-style: solid !important 等局部样式覆盖。 这是 CSS 规范中为解决边框冲突而定义的“隐藏胜出”（hidden wins）规则。
因此，你原始代码中：
#timeline td {
border-style: hidden; /* 全局禁用所有边框渲染 */
}
#timeline td.tl_date {
border-right: 1px solid black;
border-right-style: solid !important; /* ❌ 无效：hidden 已全局压制，此声明被忽略 */
}尽管加了 !important，但 hidden 的语义层级更高，浏览器会直接跳过对该单元格右侧边框的任何绘制尝试。
✅ 正确做法是：在 .tl_date 上同时声明完整的边框属性，并显式覆盖 border-style：
立即学习“前端免费学习笔记（深入）”；
#timeline td.tl_date {
padding-right: 10px;
border-right: 1px solid black; /* 完整声明：宽度、样式、颜色 */
border-style: solid !important; /* 显式重置整体 border-style，打破 hidden 锁定 */
}⚠️ 注意事项：
- 不要依赖
border-right-style单独覆盖 —— 在border-collapse: collapse模式下，边框是单元格间共享的，需保证相邻单元格边框规则一致； - 若仅想隐藏部分边框（如上下左右中的某几个），推荐改用
border: none或精确控制（如border-left: none; border-top: none;），避免使用hidden； -
border-style: hidden应仅用于需要绝对确保边框不参与任何计算与渲染的场景（例如复杂合并表头的底层重置），日常开发中优先选用none或具体方向声明。
总结：hidden 不是视觉隐藏，而是渲染层面的“取消参与”，修复的关键在于用 border-style: solid（或其它非-hidden 值）在目标元素上主动解除锁定，并配合完整 border-* 声明确保生效。
