打印时HTML表格无边框

我正在打印表格的网站上工作。打印时HTML表格无边框

我遇到的一个问题是，某些表格边框将不会被打印，尽管它们在屏幕上正确显示。

我试过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>

来源

2014-07-04 user2496520

当您打印在不同的窗口中的内容DIV，你确定这些所有的CSS也越来越被复制到了吗？ –

@KD。我想不是。我打开新窗口只是为了打印表格 – user2496520

如表被复制到一个新的窗口，你的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(); 
}

来源

2014-07-04 15:41:57 athms

谢谢你。它正在工作。祝福你 – user2496520

这真的工作，感谢你发布这个 – Julie20

我认为这个其他的问题，How to print inline CSS styles?，可能会对你的问题的答案。

另一件要尝试的是使用标准<link rel="stylesheet" href="stylefile.css" type="text/css" media="print" >语法设置样式表，以便指定一个或多个媒体目标（只需用逗号分隔它们）。

来源

2014-07-04 14:57:36

尝试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; 
    } 
}

来源

2014-07-04 14:58:22 hex494D49

我试过了你的代码，但边框仍然不可见 – user2496520

使用'！important'是坏CSS设计的一个肯定的方式。应该不惜一切代价避免。 –

@MikeK感谢您的提示:)有很多东西我不会在网络中使用，但有时我只是 - 为了使事情工作。 – hex494D49

由评论跟进 “KD” 它看起来像你没有复制CSS转到新窗口。我的猜测是你这样做是为了只打印整个页面上的特定表格。有一种更简单的方法可以解决这个问题，定义一个打印样式表，否定除了要打印的元素之外的所有元素。没有JavaScript和新的窗口，并需要复制任何东西。

<link rel="stylesheet" ref="myPrintStylesheet.css" type"text/css" media="print" />

myPrintStylesheet.css：

* { 
    display: none; 
} 

#table { 
    display: block; 
}

来源

2014-07-04 15:10:02

我试过你的代码，但边框不可见@MattK – user2496520

你是在同一页面上尝试此操作，而不是在单独的窗口中操作？让我们看看你的代码。 –

我在同一页上和同一窗口上尝试它。我正在使用新标签来打印表格。 – user2496520

试试这个，你的链接取代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);

来源

2014-07-04 15:34:08

我试过你的代码和边框仍然是看不见的。 – user2496520

打印时HTML表格无边框

回答

相关问题