My 'zebra striped' table doesn't print the striping

StackOverflow https://stackoverflow.com/questions/13769437

  •  05-12-2021
  •  | 
  •  

문제

I have a page that is not "printer friendly" so my users have asked for an option to print out a table that displays results of a search. I have created a printer friendly page, which is opened via a button and populated from the original table. The new page displays the "zebra striping" from the original table as desired. But when I pull up the Print Preview (browser menu>File>Print Preview), the striping is gone. The font changes show up. All other style changes show up. But the TR shading to effect the striping does not translate.

Here is my code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="ISO-8859-1">
    <meta http-equiv="expires" value="Thu, 16 Mar 2000 11:00:00 GMT" />
    <meta http-equiv="pragma" content="no-cache" />
    <script type="text/javascript" src="/pkc/jscripts/jquery_current.js"></script>
    <title>Product Knowledge Center - Results</title>
    <style>
      body{
        font-family: arial;
      }
      div{
        font-size: 12pt;
      }
      .odd{ background: #DDDDDD; }
      .even{ background: #FFFFFF; }
      .hdrSpan{ 
        width: 200px;
        display: inline; 
        float: left;
      }
    </style>
  </head>
  <body>
    <div id="divHeader">
      <span class="hdrSpan">Line</span>
      <span id="spnLine"></span><br />
      <span class="hdrSpan">Company</span>
      <span id="spnCompany"></span><br />
      <span class="hdrSpan">State</span>
      <span id="spnState"></span><br />
      <span class="hdrSpan">Eff. Date</span>
      <span id="spnEffDt"></span>
    </div>
    <br />
    <hr />
    <div id="divResults">
    </div>
    <script type="text/javascript">
      $(document).ready(function(){
        $("#spnLine").text(window.opener.$('[name="Line"] option:selected').text());
        $("#spnCompany").text(window.opener.$('[name="Company"] option:selected').text());
        $("#spnState").text(window.opener.$('[name="State"] option:selected').text());
        $("#spnEffDt").text(window.opener.$('[name="effectiveDate"]').val());
        $("#divResults").html(window.opener.$("#idResults").html());
        $("#resultsTbl tr").removeAttr("onclick");
      });
    </script>
  </body>
</html>

As I hope is evident, the code is pretty straight-forward and uncomplicated. I just do not understand why the striping does not show up on the printed version.

도움이 되었습니까?

해결책 2

Printer setup generally includes options for print background colors / images.

That's the best answer - so far (15 minutes?). And I'm going to flag it as the one I used. I added an alert to the page load, telling the user how to get the striping on their printout and now I'm off to the next issue...

다른 팁

There isn't much you can do, since this option depends on the user to configure it directly when printing web pages. Ideally, the user should decide if he wants to use more or less ink on printing.

There is a workaround on Webkit Browsers: you can force background-color printing by adding the code below to your CSS:

-webkit-print-color-adjust: exact;

On Firefox and IE you can set it by checking an option in the page config dialog.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top