浏览器打印时表格单元格背景色消失问题求助

核心原因 #

浏览器默认会关闭背景颜色打印（为节省墨水），所以即使页面显示正常，打印时会自动忽略背景色。

解决方案 #

1. 开启浏览器打印的背景图形选项 #

• Chrome/Brave：打开打印预览→点击「更多设置」→勾选「背景图形」
• Firefox：打开打印预览→点击「页面设置」→勾选「打印背景（颜色和图像）」

2. 用CSS强制打印背景色（更可靠，不依赖用户设置） #

替换旧的bgcolor属性，改用CSS样式并添加强制打印的属性：

<td style="background-color: #99ffff; width: 75%; -webkit-print-color-adjust: exact; print-color-adjust: exact;">
    <div class="text-left">
        <p>I.01 - TERAS DAN KANTIN</p>
    </div>
    <div class="text-right">
        <p>Kayu</p>
    </div>
</td>

• -webkit-print-color-adjust: exact：兼容Chrome、Brave等webkit内核浏览器
• print-color-adjust: exact：符合标准的属性，支持Firefox等其他浏览器

3. 外部样式表方案（适合批量设置） #

如果用外部CSS文件，添加打印媒体查询：

@media print {
    td.bg-blue {
        background-color: #99ffff !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

然后HTML中对应单元格改为：

<td class="bg-blue" style="width: 75%">
    <!-- 内容不变 -->
</td>

内容的提问来源于stack exchange，提问作者Umar Hasan