cssprintingzebra-striping

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

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.

Solution

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