bordercolor 是 html 4 时代的遗留属性，在现代浏览器中已完全失效，不能用于精准控制表格或单元格边框颜色。它被 html5 彻底移除，chrome、firefox、safari 等主流浏览器均忽略该属性；必须使用 css 的 border（如 border: 2px solid red）或 border-color（需配合 border-width 和 border-style）才能生效。
直接说结论：BORDERCOLOR 是 HTML 4 时代的遗留属性，在现代浏览器中已完全失效，不能用于精准控制表格或单元格边框颜色。必须改用 CSS 的 border-color 或 border。
为什么 BORDERCOLOR 不起作用？
你写的 <td bordercolor="red"> 或 <code><table bordercolor="#336699"> 看起来直观，但这是 HTML 4.01 中就标记为 deprecated（弃用）的属性，HTML5 标准里已移除。所有主流浏览器（Chrome、Firefox、Safari、Edge）都忽略它——不是“偶尔失效”，而是根本不会解析。<ul>
<li>它不支持单独设置某一边（比如只设左边框）</li>
<li>无法与 <code>border-style 或 border-width 组合使用
）下必然被丢弃
border-color 和 border 怎么写才有效？
关键不是“换名字”，而是写法要完整、明确。CSS 的 border 是简写属性，只写 border-color: red 不生效，因为默认边框宽度为 0、样式为 none。
- ✅ 正确：
<td style="border: 2px solid #e74c3c;">错误项</td> - ✅ 按边指定：
<td style="border-left: 3px dashed blue; border-right: 1px solid green;">混合边</td> - ❌ 错误：
<td style="border-color: red;">（没宽度、没样式，等于没边框）<li>⚠️ 注意：如果表格用了 <code>border-collapse: collapse，相邻单元格边框会合并，此时单侧设置可能被覆盖，需统一协调
如何批量给特定单元格着色而不重复写 style？
硬编码每个 style 属性可维护性差，推荐用 CSS 类 + 选择器。例如高亮第 2 行第 3 列：
<style>
.highlight-cell { border: 2px solid #9b59b6; background-color: #f9f3ff; }
/* 或更精确： */
tr:nth-child(2) td:nth-child(3) { border: 2px solid #9b59b6; }
</style><td class="highlight-cell">目标单元格</td>
- 类名方式适合固定位置或语义化标记（如
<td class="status-fail">）<li>:nth-child() 适合动态生成但结构稳定的表格，注意索引从 1 开始</li> <li>避免用 <code>!important强覆盖，优先靠选择器权重和顺序解决冲突 - 不要在纯 HTML 页面里模仿这种写法（
<table bordercolor="Red">）<li>若用 Web Forms，仍建议在 .aspx 里配合 CSS 类，而非全靠服务端拼 style 字符串</li> <li>Blazor / React / Vue 等现代框架中，<code>BorderColor属性根本不存在，必须走 CSS
ASP.NET 服务器控件里的 BorderColor 属性怎么办？
如果你看到 Table1.BorderColor = "Red" 这类 C# 代码，它确实能运行——但这只是 ASP.NET Web Forms 在服务端生成 HTML 时，**自动帮你转成内联 style**（比如输出 <table style="border-color:Red;">），并非浏览器直接识别 <code>BorderColor 属性。所以最终生效的仍是 CSS，不是 HTML 属性。
真正容易被忽略的是：边框是否“可见”，取决于三要素同时存在——width、style、color 缺一不可；而 border-collapse 的取值会彻底改变渲染逻辑，不测试就上线，很可能发现边框“消失”或“变粗两倍”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
