表格边框颜色深浅不一是因浏览器将table、th、td边框作为独立线条渲染，未设border-collapse:collapse导致重叠边框叠加或裁剪，且table、th、td的border属性未统一指定所致。

为什么table边框颜色看起来“有的深、有的浅” 这不是颜色写错了，而是浏览器默认把 table、th、td 的边框当成独立线条渲染，相邻单元格的边框重叠时，颜色会叠加或被裁剪。更常见的是：没设 border-collapse: collapse，导致双线边框中一条偏暗、一条偏亮；或者只给 table 设了边框，却忘了 th 和 td 也得统一配色。

关键点在于：表格边框不是“一个整体”，而是由多个元素各自的边框拼出来的。不强制合并，就容易出现视觉偏差。

必须同时设置 border-collapse 和统一 border 值 border-collapse: collapse 是解决颜色不一致的前提，但它本身不定义颜色——颜色还得靠 border 属性显式指定。

• 只写 border-collapse: collapse 不加 border，边框直接消失
• 只给 table 写 border: 1px solid #666，但 th 和 td 没设，结果只有外框有色，内部全是默认灰
• 给 th 和 td 分别设不同颜色（比如 th { border-color: #333; }、td { border-color: #999; }），颜色自然不一致

正确做法是三者一起写：

table, th, td {
  border: 1px solid #4a5568;
  border-collapse: collapse;
}

input 或 button 表格内嵌时边框变色怎么办 表格里放 <input> 或 <button></button>，它们自带系统级边框样式，尤其在 Chrome/Firefox 中，border-color 单独设置常导致上/左边框自动加深——这不是 bug，是浏览器对表单控件的默认渲染策略。

修复方法很简单：不用 border-color 单独设，改用完整 border 声明，并加 appearance: none 重置：

td input {
  border: 1px solid #cbd5e0;
  appearance: none;
}

注意：如果用了 CSS reset（比如 normalize.css），它可能让 border-color 继承父级，这时更要检查 computed 样式里最终生效的是哪条规则。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

移动端高清屏下边框发虚导致颜色“断层” 在 Retina 屏或高 DPR 设备上，border-width: 1px 实际渲染为 0.5 物理像素，浏览器会做模糊处理，造成颜色边缘发虚、深浅不均，尤其在深色背景上特别明显。

这不是颜色值问题，是像素对齐失效。稳妥解法是用媒体查询适配：

@media (-webkit-min-device-pixel-ratio: 2) {
  table, th, td {
    border-width: 0.5px;
  }
}

但要注意：Firefox 和旧版 Chrome 不支持 0.5px，所以更通用的做法是用伪元素模拟 1px 边框，或者接受 1px 在高清屏上的轻微模糊——只要颜色值统一，视觉一致性就比绝对锐利更重要。

真正卡住人的，往往不是“怎么写颜色”，而是没意识到表格边框是多个元素协同渲染的结果；一旦漏掉 border-collapse 或某一层 selector，颜色就立刻失联。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！