HTML5表格边框必须用CSS控制，推荐在td/th统一设置或启用border-collapse: collapse；无边框需用!important覆盖；动态效果宜用outline或box-shadow；响应式下需重置边框并避免border-radius作用于table。
用 border 属性直接控制表格边框粗细和颜色
HTML5 本身不提供专门的表格边框样式标签，所有边框控制必须通过 CSS 实现。 推荐只在 很多 HTML5 模板自带默认边框（尤其 Bootstrap 类框架），光删 排查和处理步骤： 立即学习“前端免费学习笔记（深入）”； 最稳妥的无边框写法： 当需要「选中行高亮」「悬停边框扩散」等动态效果时， 例如悬停显示蓝色外阴影边框： 注意： 在移动端折叠表格（如用 关键处理点： 移动端安全写法示例：、
、 都支持 border，但要注意：如果同时给 table 和 td 设置 border，可能因边框叠加导致双线或错位。
td 和 th 上统一设置，或启用 border-collapse: collapse 消除单元格间缝隙：table {
border-collapse: collapse;
}
td, th {
border: 2px solid #3498db;
padding: 8px;
}
去掉默认边框或实现「无边框」效果
border 不够，得覆盖其 CSS 优先级。常见错误是只写 border: none 却没加 !important 或没匹配到真实选择器。
border 样式来自哪个 CSS 文件和选择器border-collapse: separate，需先重置为 collapse 再设 border: none
th 单独设了 border-bottom，要一并清除table.no-border,
table.no-border td,
table.no-border th {
border: none !important;
border-collapse: collapse !important;
}
用
outline 或 box-shadow 替代传统边框做高亮效果border 会触发重排（reflow），影响性能。此时改用 outline（不占布局空间）或 box-shadow（可模拟内/外发光）更合适。tr:hover td {
outline: 2px solid transparent;
box-shadow: 0 0 0 2px #2980b9;
}
outline 默认不支持圆角，box-shadow 可配合 border-radius 做圆角边框感，但仅适用于块级容器（如整行 tr 包裹的 td）。响应式表格中边框样式的兼容陷阱
display: block 把 td 转成竖排）时，原 border 设置极易失效——因为 border 依赖盒模型的正常流布局。
border，改用 margin 或 padding 模拟分隔效果table 设 border-radius，它在多数浏览器下对表格整体无效，应作用于 td:first-child / td:last-child
border-spacing: 0 替代 border-collapse 时，IE11 及以下不支持，需额外 hack@media (max-width: 768px) {
table.responsive-table td {
border: none;
padding: 6px 0;
}
table.responsive-table td::before {
content: attr(data-label) ": ";
font-weight: bold;
}
}
边框样式看似简单，真正麻烦的是模板层叠规则、响应式断点下的行为漂移，以及不同浏览器对 border-collapse 的解析差异。动手前务必先 F12 看计算样式，别靠猜。
