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