printing not displaying colors

Question

printing not displaying colors

Is there a way to maintain the colors while printing my HTML page to PDF?

<table class="table table-responsive table-striped">
        <thead>
            <tr>
                <th>Elev</th>
                <th>Session navn</th>
                <th>Spørgsmål</th>
                <th>Svar</th>
                <th>Rigtigt svar</th>
                <th>Dato</th>
            </tr>
        </thead>
        <tbody>
                <tr class="success">
                        <td>test</td>
                        <td>testing</td>
                        <td>test</td>
                        <td>test</td>
                        <td>test</td>
                        <td>test</td>
                </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="5">
                    <button class="btn btn-block btn-default" onclick="deactivate">Deaktiver</button>
                </td>
                <td style="text-align:right">#3</td>
            </tr>
        </tfoot>
    </table>

I fetch data from the database and display it in the table above. Rows are colored green if correct and red if wrong. This works well on the webpage but not when printed. How can I solve this issue?

html css twitter-bootstrap printing

Answer 1

Answer №1

Printing the table colors is not possible due to a CSS rule in Bootstrap that specifically targets printing using @media print. There was once a workaround I had come across online, but unfortunately, I accidentally removed it when updating my Bootstrap version. This led me to search for a solution here. To address this issue, you can locate the problematic rule within your bootstrap.css file (specifically between lines 196-269 in Bootstrap Version 3.3.4, excluding the minimized bootstrap.min.css).

196 @media print {
197 *,
198 *:before,
199 *:after {
200 background: transparent !important;
...
264 }
265 .table-bordered th,
266 .table-bordered td {
267 border: 1px solid #ddd !important;
268 }
269 }

One approach is to either completely remove the rule or selectively eliminate certain directives. However, the first option may inadvertently affect other styles such as navbar and text shadows. Hence, it is advisable to consider the second option. Below is a revised version of the rule which I have modified; additional adjustments may be necessary based on your Bootstrap version.

@media print {
*, *:before, *:after {
-webkit-box-shadow: none !important;
box-shadow: none !important;
text-shadow: none !important;
}
a, a:visited {
text-decoration: underline;
}
a[href]:after {
content: " (" attr(href) ")";
}
abbr[title]:after {
content: " (" attr(title) ")";
}
a[href^="#"]:after, a[href^="javascript:"]:after {
content: "";
}
pre, blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
thead {
display: table-header-group;
}
tr, img {
page-break-inside: avoid;
}
img {
max-width: 100% !important;
}
p, h2, h3 {
orphans: 3;
widows: 3;
}
h2, h3 {
page-break-after: avoid;
}
select {
background: #fff !important;
}
.navbar {
display: none;
}
.btn> .caret, .dropup> .btn> .caret {
border-top-color: #000 !important;
}
}

I excluded lines 200, 201, and 255-268 from the original rule. In case you are utilizing the minified Bootstrap version, you would need to identify and modify the corresponding lines or minimize the uncompressed version accordingly. Several online tools are available for this purpose, or most IDEs include a built-in minimizer feature.

Answer 2

Printing the table colors is not possible due to a CSS rule in Bootstrap that specifically targets printing using @media print. There was once a workaround I had come across online, but unfortunately, I accidentally removed it when updating my Bootstrap version. This led me to search for a solution here. To address this issue, you can locate the problematic rule within your bootstrap.css file (specifically between lines 196-269 in Bootstrap Version 3.3.4, excluding the minimized bootstrap.min.css).

196 @media print {
197 *,
198 *:before,
199 *:after {
200 background: transparent !important;
...
264 }
265 .table-bordered th,
266 .table-bordered td {
267 border: 1px solid #ddd !important;
268 }
269 }

One approach is to either completely remove the rule or selectively eliminate certain directives. However, the first option may inadvertently affect other styles such as navbar and text shadows. Hence, it is advisable to consider the second option. Below is a revised version of the rule which I have modified; additional adjustments may be necessary based on your Bootstrap version.

@media print {
*, *:before, *:after {
-webkit-box-shadow: none !important;
box-shadow: none !important;
text-shadow: none !important;
}
a, a:visited {
text-decoration: underline;
}
a[href]:after {
content: " (" attr(href) ")";
}
abbr[title]:after {
content: " (" attr(title) ")";
}
a[href^="#"]:after, a[href^="javascript:"]:after {
content: "";
}
pre, blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
thead {
display: table-header-group;
}
tr, img {
page-break-inside: avoid;
}
img {
max-width: 100% !important;
}
p, h2, h3 {
orphans: 3;
widows: 3;
}
h2, h3 {
page-break-after: avoid;
}
select {
background: #fff !important;
}
.navbar {
display: none;
}
.btn> .caret, .dropup> .btn> .caret {
border-top-color: #000 !important;
}
}

I excluded lines 200, 201, and 255-268 from the original rule. In case you are utilizing the minified Bootstrap version, you would need to identify and modify the corresponding lines or minimize the uncompressed version accordingly. Several online tools are available for this purpose, or most IDEs include a built-in minimizer feature.

Answer 3

Answer №2

The ability to print background colors is determined by the browser settings, not by code manipulation.

Instructions on how to enable this feature can be found in the knowledge base articles for each respective browser:

Internet Explorer > https://support.microsoft.com/en-us/kb/296326
Google Chrome >
Mozilla Firefox >

Answer 4

The ability to print background colors is determined by the browser settings, not by code manipulation.

Instructions on how to enable this feature can be found in the knowledge base articles for each respective browser:

Internet Explorer > https://support.microsoft.com/en-us/kb/296326
Google Chrome >
Mozilla Firefox >

Answer 5

Answer №3

Implemented the below CSS code, and saw successful results

tr.success td {
    background-color: #dff0d8 !important;
    -webkit-print-color-adjust: exact;
}

tr.danger td {
    background-color: #f2dede !important;
    -webkit-print-color-adjust: exact;
}

Answer 6

Implemented the below CSS code, and saw successful results

tr.success td {
    background-color: #dff0d8 !important;
    -webkit-print-color-adjust: exact;
}

tr.danger td {
    background-color: #f2dede !important;
    -webkit-print-color-adjust: exact;
}

printing not displaying colors

Answer №1

Answer №2

Answer №3

Similar questions

An error in PHP has been detected within the CodeIgniter framework

Positives and negatives images for accordion menu

Is there a way to convert inline styling to CSS using Material-ui within a React component?

Occasionally, the letters in Google Fonts get jumbled up when refreshing the page, but

Dynamic value updates using jQuery input type formulas

Retrieve JSON data by making a POST request to a website's API

Transform the appearance of a complex image by altering its color using CSS

Calculating the depth of a webpage with Python

Tips for creating a clickable phone number on a WordPress classified website

What is the best way to hide the background of an extension's HTML?

Is it possible to override CSS classes in Ionic without using app.scss?

Is it possible to achieve the lower link set in a pure CSS horizontal menu where the horizontal link set is positioned below horizontal text tabs?

A two-column bootstrap design with zero padding or gaps

What is the best method to make an email address distinct?

Updating Content Dynamically with AJAX, JavaScript, and PHP without requiring a page reload or user action

Creating a child element to fully span the width of its parent using floating techniques

Customizing the appearance of an HTML element using user-input text styling

Using XSLT to convert HTML into the desired text format

Prevent automatic submission of forms when selecting attributes in HTML forms using AngularJS

Retrieving text that has been HTML-escaped from a textarea using jQuery