table元素直接加border没效果，根本原因是默认border-collapse为separate，导致table外框被单元格独立边框和间距覆盖；必须设border-collapse: collapse并统一控制table与单元格边框。
table 元素直接加 border 为什么没效果？
很多初学者给 <table> 写了 border: 1px solid #000，但边框不显示或只显示部分——根本原因是默认的 border-collapse 值为 separate，此时单元格（<td>/<th>）自带间距和独立边框，会覆盖或干扰 table 外围边框的渲染。
-
border-collapse: separate下，<table>的 border 只在 table box 自身区域绘制，但常被内边距、单元格边框或 cellspacing 掩盖 - 真正生效的外围边框，必须让 table 的 border 成为最外层“容器边框”，而不是被拆解成 cell 边框集合
解决方法很简单：强制合并边框模型，并确保单元格不抢戏：
- 给
<table>设置border-collapse: collapse - 同时给
<table>显式声明border（如border: 2px solid #333） - 可选：清空
<td>/<th>的 border，避免重叠干扰（尤其当它们也有 border 时）
table {
border-collapse: collapse;
border: 2px solid #333;
}
td, th {
border: none; /* 防止单元格边框叠加 */
padding: 8px;
}outline 不占位，但不能用作表格外围边框
outline 确实不占文档流位置（不影响布局），但它永远画在元素外边框之外，且无法控制“只画四条边”或“贴合 table 盒子边缘”。对 <table> 使用 outline 会出现两个典型问题：
- outline 会绕过整个 table（含 caption、空隙），但位置不可控，常离 table 主体太远
- 它无法响应
border-radius，也不能和内部边框协调样式（比如想让外围圆角+内部细线） - 更关键：outline 不是边框，语义上不表示结构边界，对屏幕阅读器、打印样式、CSS @media print 等场景支持弱
所以，别用 outline 替代 border 来“假装”外围边框——它不是设计用途，只是调试辅助。
立即学习“前端免费学习笔记（深入）”；
需要圆角 + 外围边框时，border-radius 怎么写才生效？
border-radius 对 <table> 生效的前提是：它必须有可渲染的 border，且 border-collapse 为 collapse。如果设了 separate，圆角会失效（浏览器忽略）。
- 只给
<table>设border-radius，不要给<td>或<th>单独设（否则角落会被内部单元格“顶破”） - 配合
overflow: hidden可防止内容溢出圆角区域（尤其有 padding 或背景色时） - 注意：IE 不支持
border-radius在<table>上（IE11 及以下基本无效）
table {
border-collapse: collapse;
border: 2px solid #444;
border-radius: 6px;
overflow: hidden; /* 关键！裁掉超出圆角的内容 */
}用 wrapper div 包裹 table 是不是更稳妥？
当 table 结构复杂（比如带 <caption>、多层嵌套、动态列宽）或需要精确控制外边距/阴影时，用一层 <div> 包裹确实更可控：
- div 可自由设
border、border-radius、box-shadow，完全不受 table 渲染规则限制 - table 本身保持
border-collapse: collapse和无 border，专注内容结构 - 注意：div 的 padding 或 margin 会改变整体尺寸，需同步调整布局预期
<div style="border: 2px solid #555; border-radius: 4px; padding: 1px;"> <table>...</table> </div>
真正麻烦的点不在“怎么加边框”，而在于：table 的 CSS 渲染逻辑和普通块级元素不同，它的 border 行为由 border-collapse 模式决定，不是简单套个 class 就能生效。 很多人卡在第一步——没意识到自己还在 separate 模式下徒劳调 border。
