CSS How to print a table with background color (without Print settings changes)

Question

The aim is to print table with colored td-s. I need a way correct for all types of browsers.

Is there any way?

Answer 1

For Chrome, Safari and Firefox:

body{
  -webkit-print-color-adjust:exact !important;
  print-color-adjust:exact !important;
}

Answer 2

Quote from here: CSS @media print issues with background-color;

IF a user has "Print Background colours and images" turned off in their print settings, no CSS will override that, so always account for that. This is a default setting.

Once that is set so it will print background colours and images, what you have there will work.

It is found in different spots. In IE9beta it's found in Print->Page Options under Paper options

In FireFox it's in Page Setup -> [Format & Options] Tab under Options.

Answer 3

For chrome you can use this:

-webkit-print-color-adjust:exact;

Or in print preview, set the checkbox 'More settings->Background Graphics'

For Firefox, I couldn't find anything to enable it using CSS. However, you can enable it as follow (If you don't see the File, press Alt key once). 'File->Page setup' and set the checkbox 'Print Background(color & images)'

Answer 4

a particularly ugly solution is to place position a .gif (or any form of vector graphic so the size can be changed) image in the table cell with height and width 100% then a negative z-index property.

Answer 5

I found @willert's solution a bit consistent and easy. I have developed it further, hope it helps you guys...

table {
    margin-top: 20px;
    border-collapse: separate;
    border-spacing: 0px;
    font:13px/1.5 'Helvetica Neue', Arial, 'Liberation Sans', FreeSans, sans-serif;
}

table td,
table th {
    background-color: transparent;
    z-index: 1;
    border-right: 0;
    border-bottom: 0;
    width: 150px;
    padding-left: 5px;
    overflow: hidden;
    height: 12px;
}

table th:before,
table td:before {
    content: "";
    padding: 0;
    height: 1px;
    line-height: 1px;
    width: 1px;
    margin: 10px -994px -996px -2px;
    display: block;
    border: 0;
    z-index: -1;
    position:relative;
    top: -6px;
}

table th:before {
    border-top: 999px solid #D6D6D6;
    border-left: 999px solid #D6D6D6;
}

table td:before {
    border-top: 999px solid #F9F9F9;
    border-left: 999px solid #F9F9F9;
}
td div.grid_3{
    overflow: hidden;
}
table .row td{
    border-bottom: #d6d6d6 1px solid;
    width: 110px;
}

Answer 6

Judging from my research on this, you're not likely to find a CSS solution that covers everything. You might be able to apply a jQuery solution to this.

<style>
.cell_pos {
    position: relative;
}
.cell_cont {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
}
.img_color {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9;
    width: 100%;
}
</style
<table>
    <tr class="row1">
        <td class="selected">
            <div class="cell_pos">
                <div id="cell_cont">Hello</div>
            </div>
        </td>
    </tr>
</table>

<script type="text/javascript">
    $(document).ready(function(){
        $('#row1 .selected).append('<img class="img_color" src="path/to/img.jpg/>');
    )};
</script>

The question was a little vague so you would probably need some work around with the css with overflow and setting cell/column widths. Hope this helps.

Answer 7

This works for me and wont affect your other CSS code:

@media print {
    div {
       background: #333333 !important;
    }
}

Answer 8

There is no solution that isn't horribly ugly, like positioning image or ridiculously large border underneath the table.

It depends what you need those backgrounds for. If it's decorative, then it may be better not to force it.

If it's to highlight some table cells, you can use color border in addition to the background. Borders are printed.

If it's very important that backgrounds are printed, then you may give users a PDF to print.

Answer 9

I've been playing around to solve this problem, and CSS content generation and modern browsers seem to provide a nice solution to this problem. NOT WIDELY TESTED, FEEDBACK WELCOME!

table {
  border-collapse: separate;
  border-spacing: 0px;
}

table td,
table th {
    background-color: transparent;
    overflow: hidden;
    z-index: 1;
    border-right: 0;
    border-bottom: 0;
}

table th:before,
table td:before {
    content: "";
    padding: 0;
    height: 1px;
    line-height: 1px;
    width: 1px;
    margin: -4px -994px -996px -6px;
    display: block;
    border: 0;
    z-index: -1;
    position:relative;
    top: -500px;
}

table th:before {
    border-top: 999px solid #c9c9c9;
    border-left: 999px solid #c9c9c9;
}

table td:before {
    border-top: 999px solid #eeeeee;
    border-left: 999px solid #eeeeee;
}

You will need to handcraft the details to fit your needs.

HTH

Answer 10

Just Use !important in your CSS and it will print, in Chrome.

Answer 11

You can do a little coloring the background by putting the contents in as an input-tag of type submit and set value to John Doe. then use class or style to manipulate the coloring. Never the less the browser will change the forecoler to black so only use light backgrounds but it works (a little).

Answer 12

I tried all suggested solutions here (and in many other questions), such as applied background-color: #000 !important; both in stylesheet and inline, or set

@media print {
  * {
    color-adjust: exact !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}

, even combined them together, but nothing worked.

After hours of researching without any results, I recognized that the "bug" lost background-color only appears on table (th, td), but other HTML elements (div,...) or other CSS attributes (border-color,...) still work.

Therefore, I came up with a "hack" to wrap-up anything inside <th> or <td> with a <div> (you can adjust padding to make it display same as prior).

Here I used React and makeStyles of @material-ui/core.

JSX:

<Table bordered>
  <thead className={classes.thead}>
    <tr>
      <th><div>Col 1</div></th>
      <th><div>Col 2</div></th>
      <th><div>Col 3</div></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td className={classes.tdGreen}><div>Row 1 - Col 1</div></td>
      <td><div>Row 1 - Col 2</div></td>
      <td><div>Row 1 - Col 3</div></td>
    </tr>
    <tr>
      <td><div>Row 2 - Col 1</div></td>
      <td className={classes.tdBlue}><div>Row 2 - Col 2</div></td>
      <td><div>Row 2 - Col 3</div></td>
    </tr>
  </tbody>
</Table>

Styles:

const useStyles = makeStyles(() => ({
  thead: {
    textAlign: 'center',

    '& th:not(:last-child)': {
      padding: '0',
      '& > div': {
        padding: '.75rem',
        backgroundColor: '#D8D8D8 !important',
      }
    }
  },
  tdGreen: {
    padding: '0 !important',
    '& > div': {
      padding: '.75rem',
      color: 'white',
      backgroundColor: 'green !important',
    }
  },
  tdBlue: {
    padding: '0 !important',
    '& > div': {
      padding: '.75rem',
      color: 'white',
      backgroundColor: 'blue !important',
    }
  }
}));

You can take the idea and convert it into pure HTML/CSS solutions.

Hope this can help anyone struggled with this issue!

Answer 13

            <td><img src="your_image" /></td>

Answer 14

This silly solution worked for me on Firefox and Chrome (Ubuntu).

Firefox: Open the print dialog box (shortcut: Ctrl+P) and goto Options tab, and make sure that the option Print Background Colors is ticked.

Chrome: Open the print dialog box (shortcut: Ctrl+P) and expand More settings and tick Background graphics.

As far as I have tested, -webkit-print-color-adjust:exact; doesn't work for Firefox and is honored in Chrome. But in both the browsers the final printing option overrides all that. So you can completely do away without it.

Try printing the following sample HTML page with and without the various settings described here and you will know.

<!DOCTYPE html>
<html>

<head>
  <style>
    body {
      -webkit-print-color-adjust: exact;
    }
  </style>
</head>

<body>
  <table style="border-width:1px;width:50%;">
    <tr style="background-color:#999999">
      <td>First Row</td>
    </tr>
    <tr style="background-color:#CCCCCC">
      <td>Second Row</td>
    </tr>
  </table>

</body>

</html>

Answer 15

I needed to use this in the weasyprint library that generates pdf's from python. if all you want to do is print a pdf then use the @print property with !important

e.g

<!DOCTYPE html>
<html>
    <head>
        <style>
            @media print {
                .a {
                    background: orange !important;
                }
                .b {
                    background: blue !important;
                }
            }
        </style>
    </head>

    <body>

        <table>
            <tr>
                <td class="a">This cell has an orange background.</td>
                <td class="b">This cell has a green background.</td>
            </tr>
        </table>
    </body>

</html>

You will notice that if you open this in a web browser you wont see the colors, put if you print it as a pdf you will. because those styles are applied on printing

if you wanted to also view the colors in the browser you would add the same styles as normal outside of print

<!DOCTYPE html>
<html>
    <head>
        <style>
                .a {
                    background: orange;
                }
                .b {
                    background: blue;
                }

            @media print {
                .a {
                    background: orange !important;
                }
                .b {
                    background: blue !important;
                }
            }
        </style>
    </head>

    <body>

        <table>
            <tr>
                <td class="a">This cell has an orange background.</td>
                <td class="b">This cell has a green background.</td>
            </tr>
        </table>
    </body>

</html>

for printing PDF's you only need the @print property

Answer 16

Apply a class to the background with setting background image and !important. The method does not require setting background printing.

HTML

<td class="red"></td>

CSS

.red { background-image: url('images/bg-red.jpg') !important; }