outline 不适合给 HTML 表格添加外轮廓，因其不参与盒模型、不占据空间、无法单边控制，且在 Firefox 和旧版 Safari 中常被忽略或渲染异常；应使用 border（配合 border-collapse: collapse）或 box-shadow 替代。
outline 不适合给 HTML 表格添加“外轮廓”——它不会像 border 那样响应布局、不占据空间、无法控制单边、且在 <table> 上表现不可靠（尤其在 Firefox 和旧版 Safari 中常被忽略或渲染异常）。
为什么 outline 在 <table> 上基本无效
outline 是为表单控件（如 <input>、<button>）设计的焦点辅助样式，语义上不参与盒模型，也不支持 outline-offset 对表格这种块级容器做“包裹式描边”。实测中：
-
<table style="outline: 2px solid red">在 Chrome 可能显示，但位置漂移、不贴合边框盒（box-sizing 影响下更混乱） - Firefox 完全不渲染
outline到<table>元素上（符合规范倾向） - 无法单独设置上/下/左/右边 outline，
outline总是四边等宽等样
真正可用的“表格外轮廓”方案：用 border + border-collapse
要让表格看起来有清晰、可控的外边框，必须依赖 border，并注意 <table> 的边框合并行为：
- 默认
border-collapse: separate：单元格各自有边框，表格自身border会出现在所有单元格外侧，但可能和单元格边框重叠或留缝 - 设
border-collapse: collapse：单元格边框合并，此时表格的border才真正成为“最外层轮廓”，且干净无间隙 - 推荐写法：
<table style="border: 3px solid #2563eb; border-collapse: collapse;">
如果真需要“非矩形”或“聚焦态轮廓”，用 box-shadow 替代 outline
当你要模拟类似 focus outline 的视觉效果（比如点击后高亮整个表格），box-shadow 更可靠、可控：
立即学习“前端免费学习笔记（深入）”；
- 支持
inset/outset、模糊、偏移，且始终围绕 content-box 或 padding-box - 可精准控制“仅外轮廓”：
box-shadow: 0 0 0 2px #3b82f6;
- 配合
:focus-within实现交互：<table tabindex="0" style="outline: none; box-shadow: 0 0 0 2px rgba(59,130,246,0.3);">
（注意加tabindex才能获得焦点）
容易被忽略的兼容性细节
表格边框行为在不同浏览器中差异很小，但仍有几个硬伤点：
-
border-radius在border-collapse: collapse下**完全失效**——圆角只对separate有效，但此时外轮廓会被单元格边框切割 - 若需圆角外轮廓，必须用
border-collapse: separate+border-spacing: 0+ 显式设置<table>的border-radius和overflow: hidden - IE11 及更早版本不支持
box-shadow在<table>上渲染（需 fallback 到border）
真正想加“外轮廓”，就老实用 border 或 box-shadow；outline 留给 input 和 button 就好。表格不是它的适用场景，强行用只会浪费调试时间。
