HTML / CSS：表格边框出现在屏幕上，但不是在打印输出？ [英] html/css: table borders appearing on screen but not in printout?
问题描述
下面是一个测试HTML文件。它在屏幕上显示得很好，但是当我在Firefox 3.6.8或IE 7.0中打印或打印预览时，表格边框不会出现。我缺少什么？
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>
更新： ，看起来像 < style> 标签具有媒体属性。我修改了Derek的答案，现在我可以在IE 7.0中工作，但不能在Firefox 3.6.8上工作:(这是Firefox中的一个已知错误？）
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>param2 description</td></tr>
<tr><td>param3</td><td>baz</td><td>3000</td><td>param3 description</td></tr>
</tbody></table>
</body>
</html>
推荐答案
看起来您正在使用黑色背景白色的桌子边框，对吗？默认情况下，Firefox不会打印背景颜色，因此最终会在白色背景上显示白色边框。
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.
这篇关于HTML / CSS：表格边框出现在屏幕上，但不是在打印输出？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
