html/css: table borders appearing on screen but not in printout?
Below is a test HTML file. It displays fine on screen but when I "print" or "print preview" in Firefox 3.6.8 or IE 7.0, the table borders do not appear. What am I missing?
<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>
update: Aha, looks like the <style> tag has a media attribute. I adapted Derek's answer, and now I get it to work in IE 7.0 but not Firefox 3.6.8: (is this a known bug in 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&g开发者_StackOverflow中文版t;param2 description</td></tr>
<tr><td>param3</td><td>baz</td><td>3000</td><td>param3 description</td></tr>
</tbody></table>
</body>
</html>
It looks like you're using a black background with white table borders, correct? By default, Firefox won't print background colors, so it ends up with a white border on a white background.
You'll probably want to set up a print stylesheet that reverses that color scheme (black on white instead of white on black) for it to print correctly.
Just call printDiv() when an event occur.
Hide those which we don't want.
function printDiv() {
document.getElementById('print').style.display="none";
window.print();
document.getElementById('print').style.display="inline";
}
加载中,请稍侯......
精彩评论