table的background-color常不可见，因td/th默认白色背景会覆盖；应设tbody或tr背景，或用th,td:nth-child()精确控制列色，禁用已废弃的bgcolor属性。
table标签加style="background-color"为什么经常看不见
因为
和 |
默认是透明背景，但会完全盖住的背景色——不是你写错了，是渲染层被挡住了。哪怕你写了style="background-color: #eee"，只要没把所有单元格设为transparent，就根本看不到效果。
临时验证方法：在开发者工具里给td, th加background-color: transparent !important，如果这时背景突然出现，就确认是子元素覆盖问题。
- 真正该设背景的地方通常是
tbody或tr，它们是块级容器，背景能铺满且不被遮挡
- 想做整表底纹（非填充），保留
border-spacing: 2px再设table背景，颜色只出现在间隙里
- 框架如 Bootstrap 默认给
table td设了白色背景，会直接盖掉你的table内联样式
给单个| 设背景色该用background-color还是bgcolor
bgcolor在 HTML5 中已彻底移除，浏览器只是出于兼容性“偶尔”渲染，不保证一致，W3C 验证器会报错，且无法配合 CSS 变量、渐变、透明度等特性。
正确做法永远是style="background-color: #ffeb3b"，支持十六进制、rgb()、命名色（如lightcoral），IE8 起全兼容。
- 别写成
background: #fff——它会清空background-image、background-repeat等所有子属性
- 务必同时设
padding，否则文字紧贴边框，视觉上像没生效
- 如果父级
tr也设了背景色，而td没显式声明，就会透出父级颜色，调试时先看「Computed」面板
批量控制列背景色为什么nth-child要同时写th和td
<col>元素不支持background-color——它只是布局占位符，Chrome/Firefox/Safari 全部忽略该样式。所谓“<col style="background-color: #eee">有效”，纯属偶然兼容，换环境就失效。
可靠写法必须用选择器命中实际渲染元素：table th:nth-child(2), table td:nth-child(2)。漏掉th，表头和数据行颜色就断层。
- 必须加
table前缀限定作用域，避免全局污染
- 遇到
colspan时，nth-child()按源码顺序计数，不是逻辑列——序号会错乱，此时应改用class标记单元格
- 最后一列想高亮？用
th:nth-last-child(-n+1)比硬写nth-child(5)更安全
JS动态改| 背景色该操作style还是class
直接改cell.style.backgroundColor = 'red'容易被后续 CSS 打断，且无法继承:hover、@media等扩展规则，维护成本高。
稳定做法是切换class：cell.classList.add('status-error')，然后在 CSS 里定义.status-error { background-color: #ffebee; }。
- 类名必须语义化，比如
status-error而不是bg-red——后者颜色一改就名实不符
- 避免在 class 规则里加
!important，否则 JS 用style覆盖会失效
- 如果用了
border-collapse: collapse，记得同步给td设padding，不然高亮区域看起来太窄
真正容易被忽略的是：你看到的「表格背景」，十有八九不是table的，而是tbody或某一层tr的。选错目标元素，再调颜色也没用。 |
|
| 前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
