我的“斑马线”表格打印时没有了条纹。

3
我有一个页面没有 "打印机友好" 的特点,所以我的用户要求提供一个选项来打印显示搜索结果的表格。我创建了一个打印机友好页面,通过一个按钮打开并从原始表格填充。新页面按预期显示原始表格的 "斑马线条纹"。但是当我打开打印预览(浏览器菜单>文件>打印预览)时,条纹消失了。字体更改会显示出来,所有其他样式更改也会显示出来,但用于实现条纹的 TR 阴影效果无法转换。
以下是我的代码:
<!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>

显然,这段代码非常直观和简单。 我只是不明白为什么打印版本上没有显示条纹。


4
打印机设置通常包括打印背景颜色/图像的选项。 - canon
5
这是浏览器上的一个选项。大多数浏览器在打印时不会显示背景颜色。然而,我知道在Chrome浏览器中有一个复选框可以允许显示背景颜色。 - phpisuber01
2个回答

4

由于此选项取决于用户在打印网页时直接配置,因此您无法做太多事情。理想情况下,用户应该决定是否要在打印时使用更多或更少的墨水。

在Webkit浏览器上有一个解决方法:您可以通过将以下代码添加到CSS中来强制打印背景颜色:

-webkit-print-color-adjust: exact;

在Firefox和IE中,您可以通过在页面配置对话框中选中一个选项来设置它。


2

打印机设置通常包括打印背景颜色/图像选项。

这是目前为止(15分钟内)最好的答案。我将其标记为我使用的答案。我在页面加载时添加了一个警报,告诉用户如何在打印输出上获取条纹,并且现在我要解决下一个问题......


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接