我正在研究应该打印表格的网站。
我遇到的一个问题是，虽然它们在屏幕上正确显示，但是不会打印某些表格边框。
我尝试过Firefox和Chrome。两者都在屏幕上显示所有表格边框，但在打印时省略了一些边框。
我需要做些什么来打印它们？
编辑1：添加了jsFiddle：
码：
JavaScript的：
function printDiv()
{
var divToPrint=document.getElementById('table');
newWin= window.open("");
newWin.document.write(divToPrint.outerHTML);
newWin.print();
newWin.close();
}
CSS：
<style type="text/css">
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
margin: 0;
padding: 0;
font: 12px/15px "Helvetica Neue", Arial, Helvetica, sans-serif;
color: #555;
background: #f5f5f5 url(bg.jpg);
}
a {
color: #666;
}
#content {
width: 65%;
max-width: 690px;
margin: 6% auto 0;
}
table {
overflow: hidden
border: 1px solid #d3d3d3;
background: #fefefe;
width: 70%;
margin: 5% auto 0;
-moz-border-radius: 5px; /* FF1+ */
-webkit-border-radius: 5px; /* Saf3-4 */
border-radius: 5px;
-moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
}
th, td {
padding: 18px 28px 18px;
text-align: center;
}
th {
padding-top: 22px;
text-shadow: 1px 1px 1px #fff;
background: #e8eaeb;
}
td {
border-top: 1px solid #e0e0e0;
border-right: 1px solid #e0e0e0;
}
tr.odd-row td {
background: #f6f6f6;
}
td.first, th.first {
text-align: left
}
td.last {
border-right: none;
}
/*
Background gradients are completely unnecessary but a neat effect.
*/
td {
background: -moz-linear-gradient(100% 25% 90deg, #fefefe, #f9f9f9);
background: -webkit-gradient(linear, 0% 0%, 0% 25%, from(#f9f9f9), to(#fefefe));
}
tr.odd-row td {
background: -moz-linear-gradient(100% 25% 90deg, #f6f6f6, #f1f1f1);
background: -webkit-gradient(linear, 0% 0%, 0% 25%, from(#f1f1f1), to(#f6f6f6));
}
th {
background: -moz-linear-gradient(100% 20% 90deg, #e8eaeb, #ededed);
background: -webkit-gradient(linear, 0% 0%, 0% 20%, from(#ededed), to(#e8eaeb));
}
tr:first-child th.first {
-moz-border-radius-topleft: 5px;
-webkit-border-top-left-radius: 5px; /* Saf3-4 */
}
tr:first-child th.last {
-moz-border-radius-topright: 5px;
-webkit-border-top-right-radius: 5px; /* Saf3-4 */
}
tr:last-child td.first {
-moz-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px; /* Saf3-4 */
}
tr:last-child td.last {
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px; /* Saf3-4 */
}
</style>
在将表复制到新窗口时，不会保留CSS。您可以通过将一些相关的CSS传递到document.write（）方法中的新窗口来解决这个问题。您还需要提供少量填充以引入边框。请参阅以下JSFiddle，其中显示了这一点：http://jsfiddle.net/826Zm/3/
function printDiv() {
var divToPrint = document.getElementById('table');
var htmlToPrint = '' +
'<style type="text/css">' +
'table th, table td {' +
'border:1px solid #000;' +
'padding:0.5em;' +
'}' +
'</style>';
htmlToPrint += divToPrint.outerHTML;
newWin = window.open("");
newWin.document.write(htmlToPrint);
newWin.print();
newWin.close();
}
尝试使用window.print()而不是printDiv()，因为你没有加载CSS。
要么
将CSS更新为此
table {
border: solid #000 !important;
border-width: 1px 0 0 1px !important;
}
th, td {
border: solid #000 !important;
border-width: 0 1px 1px 0 !important;
}
或者对此
@media print {
table {
border: solid #000 !important;
border-width: 1px 0 0 1px !important;
}
th, td {
border: solid #000 !important;
border-width: 0 1px 1px 0 !important;
}
}
我认为另外这个问题，How to print inline CSS styles?，可能会回答你的问题。
另一件事是使用标准的<link rel="stylesheet" href="stylefile.css" type="text/css" media="print" >语法设置样式表，以便指定一个或多个媒体目标（只需用逗号分隔它们）。
跟进“K D”的评论后，您似乎没有将CSS复制到新窗口。我的猜测是你这样做，所以只打印整个页面上的特定表格。有一种更简单的方法可以解决这个问题，定义一个打印样式表，除了要打印的元素之外，它还会消除每个元素。不需要JavaScript和新窗口以及复制任何东西。
<link rel="stylesheet" ref="myPrintStylesheet.css" type"text/css" media="print" />
myPrintStylesheet.css：
* {
display: none;
}
#table {
display: block;
}
试试这个，用您的链接替换YOUR.css：
function printDiv() {
var strHtml = "<html>\n<head>\n <link rel=\"stylesheet\" type=\"text/css\" href=\"YOUR.css\">\n</head><body><div style=\"testStyle\">\n" + document.getElementById('table').innerHTML + "\n</div>\n</body>\n</html>";
newWin = window.open("");
newWin.document.writeln(strHtml);
newWin.print();
newWin.close();
}
document.getElementById('printbtn').addEventListener('click', printDiv);