CSS 如何打印带有背景颜色的表格（不更改打印设置）

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 webkit browsers (Chrome and Safari):

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

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

一个特别难看的解决方案是在表格单元格中放置一个.gif（或任何形式的矢量图形以便大小可以改变）图像，其高度和宽度为100％，然后是负z-index属性。

Answer 4

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 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

只需使用!important的CSS，它将在Chrome中打印。

Answer 8

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 9

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 10

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

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

Answer 11

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

Answer 12

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 13

For chrome you can use this:

-webkit-print-color-adjust:exact;

Or in print preview, tick the More settings->Background Graphics

For Firefox, you can't enable it using any CSS. You can enable it as follow (If you don't see the File, press Alt key once). File->Page setup and tick the Print Background(color & images)

Answer 14

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

eg

<!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 15

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; }

Answer 16

2023, maybe it's quite late.

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!