直接给加border样式并配合border-collapse: collapse即可干净控制外边框颜色；bordercolor属性已从HTML5中彻底移除，现代浏览器完全忽略它，VS Code等编辑器会标灰提示“unknown attribute”。

直接给 <table> 元素加 <code>border 样式，再配合 border-collapse: collapse，就能干净地控制外边框颜色——别用已废弃的 bordercolor 属性，它在所有现代浏览器里都不起作用。

为什么 bordercolor 不生效？

这个属性来自 HTML 4.01，HTML5 已彻底移除。哪怕你写成 <table bordercolor="red"> 或 <code><td bordercolor="blue">，浏览器会忽略它，连 DevTools 的 Styles 面板里都看不到对应声明。<ul> <li>不是兼容性问题，是标准层面“不存在”</li> <li>某些旧版 IE 可能偶然响应，但不可依赖</li> <li>VS Code 或 WebStorm 通常会标灰提示“unknown attribute”</li> </ul> <h3><code><table> 外边框怎么单独设色？<p>关键不是“只设外边框”，而是让表格自身有边框、内部单元格无边框或边框合并后不干扰外轮廓。最稳做法：</p> <ul><li>给 <code><table> 加 <code>border: 2px solid #d32f2f

同时设 border-collapse: collapse，否则内边框会叠加出双线

不给 <tr>、<code><td> 单独设 <code>border，避免干扰外框

示例：

A	B
C	D

想保留内边框，但外边框颜色不同怎么办？

这时不能只靠 <table> 的 <code>border，得用 CSS 选择器精确控制：

• 用 border-collapse: separate + border-spacing: 0 维持独立边框结构
• 给 <table> 设外边框：<code>border: 3px solid #1976d2
• 给 <td> 和 <code><th> 设内边框：<code>border: 1px solid #e0e0e0

  这样外框和内框颜色互不干扰，且可分别调整粗细和样式。

  

  Html2md

  使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

  下载

  容易被忽略的细节：padding 和空单元格

  外边框颜色看着“不对劲”，常常不是颜色设错了，而是视觉干扰：

  • 没设 padding 的 <td> 会让文字贴着边框，显得外框“变粗”或“发虚” <li>空单元格（比如 <code><td></td>）在 border-collapse: collapse 下可能塌陷，导致外框局部断开
  • 如果用了 background-color，记得检查是否盖住了边框（特别是半透明色）

  真正要调外边框颜色时，先确保 <table> 自身的 <code>border 声明清晰、无覆盖，再看渲染效果——其他都是干扰项。

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