tr标签加style="background-color"是最直接有效的方式，它只影响该行单元格背景色，但不覆盖td自身设置的背景色；需配合border-collapse: collapse避免隔行变色被边框间隙打断。

tr 标签加 style="background-color" 是最直接有效的方式

给 <tr> 加内联 <code>style 能立刻生效，且优先级高、无需额外 CSS 选择器。但要注意：它只影响该行所有单元格的背景色，不覆盖单元格自身设置的 background-color（后者会优先生效）。

• 如果某 <td> 也写了 <code>style="background-color: pink;"，那这一个单元格就显示粉色，其余同在该行的单元格才显示 <tr> 设定的颜色 <li>别用已废弃的 <code>bgcolor 属性（如 <tr bgcolor="#eee">），现代浏览器虽可能兼容，但 HTML5 不支持，W3C 校验失败，且无法配合透明度或渐变 <li>若整行需统一高亮（比如“已审核”状态行），这种写法比逐个给 <code><td> 加样式更简洁可靠 <h3>用 tr:nth-child(even)/odd 实现隔行变色时，必须配 border-collapse: collapse</h3> <p>隔行变色本质是 CSS 选择器行为，但默认表格边框是分离（<code>border-collapse: separate），导致相邻行之间有空白缝隙，视觉上颜色块被“打断”，显得不连贯。
  

  Html2md

  使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

  下载
  • 务必在 <table> 上加 <code>style="border-collapse: collapse;"，否则 tr:nth-child(even) 的背景色会被默认 cellspacing 和边框间隙切割成断续条纹
  • 同时建议为 <td> 和 <code><th> 设置 <code>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"）管理行样式更利于维护，但容易忽略语义化标签带来的样式继承差异。

  • <thead> 中的 <code><tr> 默认有加粗、居中等 UA 样式，其 <code>background-color 可能被浏览器默认样式弱覆盖，建议显式重置 color 和 font-weight
  • <tbody> 行类名可直接用 <code>.status-pending td 选择器，避免只写 .status-pending——因为某些框架或 CMS 会动态插入空行或辅助行，导致误匹配
  • 不要依赖位置序号（如 tr:nth-of-type(3)）来设背景色，数据动态增删后极易错位；优先用 data 属性驱动，例如 <tr data-status="error"> + <code>tr[data-status="error"] { background-color: #ffebee; }

    background-color 与 border-color 同时设置时，边框会压盖背景色边缘

    这是常被忽略的渲染细节：当单元格同时设了 background-color 和 border，边框绘制在背景色之上，视觉上背景色“被切掉一圈”。若想背景色铺满到边框内侧，必须用 box-sizing: border-box，但它对 <td> 无效——表格单元格的盒模型固定为 <code>border-box，无需手动设置。

    • 真正要处理的是边框合并问题：不加 border-collapse: collapse 时，<tr> 的背景色会被相邻行边框“遮挡”，看起来像没生效 <li>若某行需要粗边框+浅底色，推荐写成 <code>style="background-color: #fff9c4; border-bottom: 2px solid #ffc107;"，只设单边边框，避免四边叠加干扰背景延伸感
    • RGBA 颜色（如 background-color: rgba(255, 235, 59, 0.3);）可用于半透高亮，但注意父容器若无背景色，会透出页面底色，造成意外混色

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！