必须给<td>或<th>直接加边框样式，配合<table style="border-collapse: collapse">防止交界错位，并推荐用class管理、叠加背景色与padding提升可读性。
只给 <td> 或 <th> 加边框，别动 <table>
直接给 <table> 写 border 属性或 style="border: ..."，整张表都会套边框，根本做不到“特定单元格”。必须把样式写到目标单元格本身上。
- 错误写法：
<table style="border: 1px solid red">→ 所有单元格外圈加框，内部无边线，无法定位单个格子 - 正确做法：只在要强调的单元格加样式，比如
<td style="border: 2px solid #d32f2f">异常值</td> - 若需仅某一边有线，用方向性属性：
border-left、border-bottom等更精准，例如border-right: 3px dashed #2196f3
border-collapse: collapse 是让边框“不重叠”的关键
即使你只给几个 <td> 加了边框，如果表格没设 border-collapse: collapse，这些边框可能和相邻单元格的默认边框（哪怕没显式设置）产生视觉干扰，尤其在行/列交界处出现双线或空隙。
- 必须在
<table>上声明：style="border-collapse: collapse;"，否则单格边框容易被“吃掉”或错位 - 这个属性不影响你单独加的边框，只控制已有边框如何渲染；没它，
border-top和border-bottom可能看起来像两条线 - 不用
border-spacing—— 它只在border-collapse: separate下生效，而你要的是精准控制，不是靠间距“撑开”边框
背景色 + 边框组合才真正突出单元格
单靠边框有时不够醒目，尤其在密集数据中。叠加 background-color 是最直接的强化方式，但要注意颜色搭配和可读性。
- 示例：
<td style="border: 2px solid #f44336; background-color: #ffebee; padding: 6px;">⚠️ 超限</td> - 务必加
padding，否则文字紧贴边框，视觉压迫感强，也影响点击区域 - 避免用纯黑/纯白配高饱和边框色（如
border: 3px solid red; background-color: white），对比太刺眼；浅红底+深红边、浅蓝底+深蓝边更稳妥 - 不要用已废弃的
bgcolor属性——HTML5 不认它，浏览器会忽略
用 class 替代内联 style 更适合批量操作
如果要高亮一整列、某几行，或按数据条件动态着色（比如数值 >100 的单元格），硬写一堆 style=... 很难维护，也容易漏改。
立即学习“前端免费学习笔记（深入）”；
- 定义语义化 class：
<style>.highlight-error { border: 2px solid #d32f2f; background-color: #ffebee; }</style> - 然后在 HTML 中复用：
<td class="highlight-error">500</td> - 配合伪类可批量处理：比如
tr:nth-child(odd) td:first-child给奇数行首列加边框，无需逐个加 class - JavaScript 动态加 class 更灵活：
cell.classList.add('highlight-error')，比拼接 style 字符串安全得多
最容易被忽略的是 border-collapse: collapse 的作用范围——它必须写在 <table> 元素上，且对所有后代单元格生效；漏掉这句，再精细的单元格边框也可能在交界处“断开”或“加粗”。
