在 CSS 表格布局中，border-style: hidden 具有最高优先级的隐藏语义，会彻底抑制边框渲染，即使后续用 !important 显式声明 solid 也无法生效；解决方法是统一通过 border-right 等复合属性直接定义宽度、样式与颜色，或显式重置 border-style。
在 css 表格布局中，`border-style: hidden` 具有最高优先级的隐藏语义，会彻底抑制边框渲染，即使后续用 `!important` 显式声明 `solid` 也无法生效；解决方法是统一通过 `border-right` 等复合属性直接定义宽度、样式与颜色，或显式重置 `border-style`。
CSS 的 border-style: hidden 并非普通意义上的“视觉隐藏”，而是一个具有表格边框冲突解决机制（border conflict resolution） 特殊语义的关键字。根据 CSS2.1 规范：当 border-collapse: collapse 启用时，hidden 的优先级高于 solid、dashed 等所有其他样式——它会强制该边框“不参与渲染”，且不可被后代选择器或 !important 覆盖。
在你的代码中：
#timeline td {
border-style: hidden; /* ✅ 全局禁用所有边框渲染 */
}
#timeline td.tl_date {
border-right: 1px solid black;
border-right-style: solid !important; /* ❌ 无效：hidden 已锁定边框不可见 */
}
尽管 border-right-style: solid !important 语法合法，但因父级 border-style: hidden 已将整个单元格的边框状态设为“已隐藏”，浏览器在边框合并计算阶段就跳过了该边的绘制流程，后续样式声明无法“唤醒”它。
✅ 正确做法有两种（推荐第一种）：
方案一：用复合属性一次性声明（最简洁可靠）
直接使用 border-right（含 width + style + color），它会自动覆盖 border-style 的隐式影响：
#timeline td.tl_date {
padding-right: 10px;
border-right: 1px solid black; /* ✅ 无需 !important，天然生效 */
}
方案二：显式重置 border-style 并指定方向
若需保留细粒度控制，可先解除 hidden 对整体边框的压制，再单独设置右侧：
#timeline td.tl_date {
border-style: solid none none none; /* 上/右/下/左 → 只启用上边框样式 */
border-right-width: 1px;
border-right-color: black;
}
/* 或更清晰地： */
#timeline td.tl_date {
border: none; /* 先清空所有 */
border-right: 1px solid black;
}
⚠️ 注意事项：
-
border-collapse: collapse下，hidden是唯一能完全压制边框的值（none仅表示“无样式”，仍可能受相邻单元格边框影响）； - 避免混用
border-style和单方向border-*属性，易引发不可预测的层叠行为； - 在调试时，可用浏览器开发者工具检查“Computed”面板中的
border-right-style值——若显示hidden，说明仍被全局规则压制。
总结：border-style: hidden 是 CSS 表格边框系统的“硬性开关”，不是视觉样式；要实现局部边框，应绕过它，直接使用 border-[direction] 复合属性进行精准控制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
