CODEWITHSUNDEEP
htmlcsspdf
Hermann Stahl
Hermann Stahl

Reputation: 160

CSS border won't display when printing or converting to PDF

I would like to print this HTML table with the elements displayed with rounded borders, but as soon as I print the page the CSS class seems not to be displayed anymore. Can anyone help? 

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style type="text/css">
                .hashtag {
                    display: inline-block;
                    color: white;
                    font-size: 20px;
                    background-color: rgba(46, 200, 40, 0.5);
                    margin-left: 1px;
                    margin-right: 1px;
                    margin-top: 1px;
                    margin-bottom: 1px;
                    padding: 0.0em 0.5em;
                    border-radius: 1em;
                    text-indent: 0;
                    text-align: center;
                }
        </style>
    </head>
    <body>

    <tr>
        <td>
            <p class="hashtag" align="center">CSS</p>
            <p class="hashtag" align="center">WON'T</p>
            <p class="hashtag" align="center">PRINT</p>
        </td>
    </tr>
    </body>
    </html>

Upvotes: 1

Views: 4634

Answers (2)

Peter B
Peter B

Reputation: 24147

You are trying to print white text on a colored background, but most browsers will not print backgrounds by default (or if they do, then it is because the user has changed a setting to enable it).

You can prepare for this using a @media print { ... } addition to your stylesheet, which changes the applied style so it will print more nicely. For an example see the snippet below:

.hashtag {
  display: inline-block;
  color: white;
  font-size: 20px;
  background-color: rgba(46, 200, 40, 0.5);
  margin-left: 1px;
  margin-right: 1px;
  margin-top: 1px;
  margin-bottom: 1px;
  padding: 0.0em 0.5em;
  border-radius: 1em;
  text-indent: 0;
  text-align: center;
}

@media print {
  .hashtag {
    color: black;
    background-color: white;
    border: 1px solid black;
  }
  #btnPrint {
    display: none
  }
}
<p class="hashtag" align="center">CSS</p>
<p class="hashtag" align="center">WILL</p>
<p class="hashtag" align="center">PRINT (B/W)</p>

<button id="btnPrint" onclick="window.print()">Print</button>

Upvotes: 4

Johannes
Johannes

Reputation: 67768

You are using white text on a dark background. But most browsers don't print background images or background colors by default, which will result in white text on no/white background in your case, i.e. it will remain invisible.

It is possible to print background colors, but that's a browser preference/setting that can only be set/changed by the user, not via CSS or any other code in the website.

Upvotes: 5

Related Questions