html/css：表格邊框出現在屏幕上但不在打印輸出中？

Question

下面是一個測試 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>標簽有一個media屬性。 我改編了 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>

Answer 1

看起來您使用的是帶有白色表格邊框的黑色背景，對嗎？ 默認情況下，Firefox 不會打印背景顏色，因此它最終會在白色背景上顯示一個白色邊框。

您可能想要設置一個打印樣式表來反轉該配色方案（白底黑字而不是黑底白字）以便正確打印。

Answer 2

只需在事件發生時調用printDiv() 。
隱藏那些我們不想要的。

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

html/css：表格邊框出現在屏幕上但不在打印輸出中？

問題描述

2 個解決方案

解決方案1
1 已采納 2010-08-12 16:16:37

解決方案2
1 2020-06-09 19:01:16

html/css：表格邊框出現在屏幕上但不在打印輸出中？

問題描述

2 個解決方案

解決方案1 1 已采納 2010-08-12 16:16:37

解決方案2 1 2020-06-09 19:01:16

解決方案1
1 已采納 2010-08-12 16:16:37

解決方案2
1 2020-06-09 19:01:16