html/css：表格边框出现在屏幕上但不在打印输出中？答案

【问题标题】：html/css: table borders appearing on screen but not in printout?html/css：表格边框出现在屏幕上但不在打印输出中？
【发布时间】：2010-08-12 16:09:44
【问题描述】：

下面是一个测试 HTML 文件。它在屏幕上显示正常，但是当我在 Firefox 3.6.8 或 IE 7.0 中“打印”或“打印预览”时，表格边框不会出现。我错过了什么？

<html>
<head>
    <style type="text/css">
        body {
          background: black;
          font-family: arial, sans-serif;
          color: white;
        }
        table.param, table.param td, table.param th {border: 1px solid white; border-collapse: collapse; }
        table.param td { text-align: left; vertical-align: bottom; color: white; font-size: 90%; }
        h2,h3 { margin: 0; }
        a:link { color: #00FF00; } 
        a:visited { color: #8080FF; }
        a:hover { color: #FFFFFF; }
        a:active { color: #FFFF00; }
    </style>
</head>
<body><h2>Software Parameters</h2>
    <table class="param"><tbody>
        <tr><th>head1</th><th colspan="3">blah blah blah</th></tr>
        <tr><td>param1</td><td>foo</td><td>2000</td><td>param1 description</td></tr>
        <tr><td>param2</td><td>bar</td><td>4000</td><td>param2 description</td></tr>
        <tr><td>param3</td><td>baz</td><td>3000</td><td>param3 description</td></tr>
    </tbody></table>
</body>
</html>

更新：啊哈，看起来像 <style> tag has a media attribute。我改编了 Derek 的答案，现在我让它在 IE 7.0 但不是 Firefox 3.6.8 中工作：（这是 Firefox 中的一个已知错误吗？）

<html>
<head>
    <style type="text/css" media="print">
        body {
          background: white;
          color: black;
        }
    </style>
    <style type="text/css" media="screen">
        body {
          background: black;
          color: white;
        }
    </style>
    <style type="text/css">
        body {
          font-family: arial, sans-serif;
        }
        table.param, table.param td, table.param th {border: 1px solid; border-collapse: collapse; }
        table.param td { text-align: left; vertical-align: bottom; font-size: 90%; }
        h2,h3 { margin: 0; }
        a:link { color: #00FF00; } 
        a:visited { color: #8080FF; }
        a:hover { color: #FFFFFF; }
        a:active { color: #FFFF00; }
    </style>
</head>
<body><h2>Software Parameters</h2>
    <table class="param"><tbody>
        <tr><th>head1</th><th colspan="3">blah blah blah</th></tr>
        <tr><td>param1</td><td>foo</td><td>2000</td><td>param1 description</td></tr>
        <tr><td>param2</td><td>bar</td><td>4000</td><td>param2 description</td></tr>
        <tr><td>param3</td><td>baz</td><td>3000</td><td>param3 description</td></tr>
    </tbody></table>
</body>
</html>

【问题讨论】：

标签： html css

【解决方案1】：

看起来您使用的是带有白色表格边框的黑色背景，对吗？默认情况下，Firefox 不会打印背景颜色，因此它以白色背景上的白色边框结束。

您可能需要设置一个打印样式表来反转该配色方案（白底黑而不是黑底白），以便正确打印。

【讨论】：

有没有办法通过<style> 标签内联做到这一点？
@Jason S - 您可以使用@media print { /*your css here */}，但您可能会遇到浏览器兼容性问题。以下是更多信息：reference.sitepoint.com/css/at-media

【解决方案2】：

发生事件时只需致电printDiv()。
隐藏我们不想要的。

function printDiv() {
  document.getElementById('print').style.display="none";
  window.print();
  document.getElementById('print').style.display="inline";  
}

【讨论】：