HTML表格中如何设置跨越两行的背景色（实用技巧）-html教程-PHP中文网

rowspan单元格背景失效是因tr或tbody背景覆盖所致，需用CSS强制覆盖或伪元素补全背景；关键要清除干扰背景、设置position:relative及伪元素height为行数百分比。

html表格中如何设置跨越两行的背景色（实用技巧）

直接用 rowspan 本身不带背景色，必须配合 CSS 显式设置 —— 否则跨行单元格的背景会“断开”或被相邻行覆盖。

为什么 `rowspan` 单元格背景经常失效

常见现象是：给一个 <td rowspan="2"> 加了 <code>style="background-color: #ffeb3b;"，但第二行位置仍是默认白底。这是因为浏览器渲染时，<tr> 的背景会叠在 <code><td> 上方，尤其当 <code><tr> 或 <code><tbody> 有自身背景（哪怕透明）时，就会截断跨行单元格的视觉延续。<ul> <li>根本原因不是 <code>rowspan 不支持背景，而是层叠上下文和继承规则干扰了渲染顺序

如果表格启用了 border-collapse: collapse，某些旧版 Chrome 会进一步加剧背景“断裂”

使用

<thead>/</thead>
<tbody> 分区后，<code><thead> 的背景默认会盖住跨行 <code><td> 的下半部分
<h3>可靠写法：用 <code>tr:nth-child()

+ td[rowspan] 组合控制

与其只依赖单个 <td> 的内联样式，不如用 CSS 精准定位并强制覆盖。关键是把背景“托”到足够高的层级：<ul><li>给目标 <code><td> 加一个类，比如 <code>class="span-bg"

在 CSS 中写：

.span-bg { background-color: #ffeb3b !important; }

同时清除所在行的干扰背景：

tr:nth-child(2) { background-color: transparent; }

（假设跨行从第 2 行开始）

若需兼容 IE11，避免用 :nth-child，改用明确 class，如 tr.row-2

更稳妥的替代方案：用伪元素“补全”背景

当跨行单元格内容高度不固定、或需要严格对齐时，纯 CSS 背景可能仍会露白。此时可借助 ::after 伪元素手动绘制一块矩形背景：

Html2md

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

下载

给 <td rowspan="2"> 设置 <code>position: relative;

添加 CSS：

.span-bg::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 200%; background-color: #ffeb3b; z-index: -1; }

height: 200% 是关键——它让伪元素撑满两行高度；若跨 3 行，就写 300%
注意：必须确保父 <td> 有 <code>overflow: visible（默认就是），否则伪元素会被裁剪
容易被忽略的细节：边框与文字对齐会暴露背景断裂

即使背景颜色看起来连上了，一旦加上 border 或调整 vertical-align，断裂感立刻浮现。最常踩的坑是：
- 没设 border-collapse: separate 就强行用 rowspan，导致边框错位、背景被挤压
- 用 line-height 控制文字居中时，实际单元格高度 ≠ 文字行高，伪元素高度计算失准
- 响应式表格里 td 宽度收缩，但 rowspan 跨行背景仍按原始宽度渲染，造成右侧空白漏底色