tr标签加style="background-color"是最直接有效的方式，它只影响该行单元格背景色，但不覆盖td自身设置的背景色；需配合border-collapse: collapse避免隔行变色被边框间隙打断。
tr 标签加 style="background-color" 是最直接有效的方式
给 <tr> 加内联 style 能立刻生效，且优先级高、无需额外 CSS 选择器。但要注意：它只影响该行所有单元格的背景色，不覆盖单元格自身设置的 background-color（后者会优先生效）。
- 如果某
<td>也写了style="background-color: pink;"，那这一个单元格就显示粉色，其余同在该行的单元格才显示<tr>设定的颜色 - 别用已废弃的
bgcolor属性（如<tr bgcolor="#eee">），现代浏览器虽可能兼容，但 HTML5 不支持，W3C 校验失败，且无法配合透明度或渐变 - 若整行需统一高亮（比如“已审核”状态行），这种写法比逐个给
<td>加样式更简洁可靠
用 tr:nth-child(even)/odd 实现隔行变色时，必须配 border-collapse: collapse
隔行变色本质是 CSS 选择器行为，但默认表格边框是分离（border-collapse: separate），导致相邻行之间有空白缝隙，视觉上颜色块被“打断”，显得不连贯。
- 务必在
<table>上加style="border-collapse: collapse;"，否则tr:nth-child(even)的背景色会被默认 cellspacing 和边框间隙切割成断续条纹 - 同时建议为
<td>和<th>设置padding，否则文字紧贴边框，高亮效果廉价 - 示例：
<table style="border-collapse: collapse;"><tr><td>A</td></tr></table>，再配合tr:nth-child(even) { background-color: #f5f5f5; }
class 方式批量控制行背景色，但要注意 tbody 与 thead 的样式隔离
用 CSS 类（如 class="status-pending"）管理行样式更利于维护，但容易忽略语义化标签带来的样式继承差异。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
<thead>中的<tr>默认有加粗、居中等 UA 样式，其background-color可能被浏览器默认样式弱覆盖，建议显式重置color和font-weight -
<tbody>行类名可直接用.status-pending td选择器，避免只写.status-pending——因为某些框架或 CMS 会动态插入空行或辅助行，导致误匹配 - 不要依赖位置序号（如
tr:nth-of-type(3)）来设背景色，数据动态增删后极易错位；优先用 data 属性驱动，例如<tr data-status="error">+tr[data-status="error"] { background-color: #ffebee; }
background-color 与 border-color 同时设置时，边框会压盖背景色边缘
这是常被忽略的渲染细节：当单元格同时设了 background-color 和 border，边框绘制在背景色之上，视觉上背景色“被切掉一圈”。若想背景色铺满到边框内侧，必须用 box-sizing: border-box，但它对 <td> 无效——表格单元格的盒模型固定为 border-box，无需手动设置。
立即学习“前端免费学习笔记（深入）”；
- 真正要处理的是边框合并问题：不加
border-collapse: collapse时，<tr>的背景色会被相邻行边框“遮挡”，看起来像没生效 - 若某行需要粗边框+浅底色，推荐写成
style="background-color: #fff9c4; border-bottom: 2px solid #ffc107;"，只设单边边框，避免四边叠加干扰背景延伸感 - RGBA 颜色（如
background-color: rgba(255, 235, 59, 0.3);）可用于半透高亮，但注意父容器若无背景色，会透出页面底色，造成意外混色
