Why Doesn't My Table's Background Color Show in Chrome's Print Preview?

Print Preview Excludes Background Color

When printing a web page, specified background colors may fail to appear in the print preview. Specifically, a table's assigned background color is not displaying in Chrome's print preview.

The following CSS property has been applied without success:

-webkit-print-color-adjust: exact;

Resolving the Issue

While the CSS property print-color-adjust: exact; functions correctly, there are fundamental troubleshooting steps to ensure the desired CSS takes effect when printing.

1. Separate Print from Screen CSS:

   • Implement media queries to distinguish CSS styles for printing (@media print) from those intended for screen display (@media screen).

2. Increased CSS Specificity:

   • In this case, the print-color-adjust property is functional, but other CSS rules with higher specificity are overwriting it. To resolve this, use the !important declaration in the @media print rules:

@media print {
    tr.vendorListHeading {
        background-color: #1a4567 !important;
        print-color-adjust: exact; 
    }
}

@media print {
    .vendorListHeading th {
        color: white !important;
    }
}

The above is the detailed content of Why Doesn't My Table's Background Color Show in Chrome's Print Preview?. For more information, please follow other related articles on the PHP Chinese website!