outline 不适合给 html 表格添加外轮廓，因其不参与盒模型、不占据空间、无法单边控制，且在 firefox 和旧版 safari 中常被忽略或渲染异常；应使用 border（配合 border-collapse: collapse）或 box-shadow 替代。

outline 不适合给 HTML 表格添加“外轮廓”——它不会像 border 那样响应布局、不占据空间、无法控制单边、且在 <table> 上表现不可靠（尤其在 Firefox 和旧版 Safari 中常被忽略或渲染异常）。 <h3>为什么 <code>outline 在 <table> 上基本无效 <p><code>outline 是为表单控件（如 <input>、<button></button>）设计的焦点辅助样式，语义上不参与盒模型，也不支持 outline-offset 对表格这种块级容器做“包裹式描边”。实测中：

• <table style="outline: 2px solid red"> 在 Chrome 可能显示，但位置漂移、不贴合边框盒（box-sizing 影响下更混乱） <li>Firefox 完全不渲染 <code>outline 到 <table> 元素上（符合规范倾向） <li>无法单独设置上/下/左/右边 outline，<code>outline 总是四边等宽等样

真正可用的“表格外轮廓”方案：用 border + border-collapse

要让表格看起来有清晰、可控的外边框，必须依赖 border，并注意 <table> 的边框合并行为： <ul> <li>默认 <code>border-collapse: separate：单元格各自有边框，表格自身 border 会出现在所有单元格外侧，但可能和单元格边框重叠或留缝

• 设 border-collapse: collapse：单元格边框合并，此时表格的 border 才真正成为“最外层轮廓”，且干净无间隙
• 推荐写法：

  如果真需要“非矩形”或“聚焦态轮廓”，用 box-shadow 替代 outline

  当你要模拟类似 focus outline 的视觉效果（比如点击后高亮整个表格），box-shadow 更可靠、可控：

  

  HTML Extract

  使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...

  下载
  • 支持 inset / outset、模糊、偏移，且始终围绕 content-box 或 padding-box
  • 可精准控制“仅外轮廓”：

    box-shadow: 0 0 0 2px #3b82f6;

  • 配合 :focus-within 实现交互：

  （注意加 tabindex 才能获得焦点）

  容易被忽略的兼容性细节

  表格边框行为在不同浏览器中差异很小，但仍有几个硬伤点：

  • border-radius 在 border-collapse: collapse 下**完全失效**——圆角只对 separate 有效，但此时外轮廓会被单元格边框切割
  • 若需圆角外轮廓，必须用 border-collapse: separate + border-spacing: 0 + 显式设置 <table> 的 <code>border-radius 和 overflow: hidden
  • IE11 及更早版本不支持 box-shadow 在 <table> 上渲染（需 fallback 到 <code>border）

    真正想加“外轮廓”，就老实用 border 或 box-shadow；outline 留给 input 和 button 就好。表格不是它的适用场景，强行用只会浪费调试时间。

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