keine Grenze in HTML-Tabelle beim Drucken

Question

Ich arbeite auf der Website, die Tabelle drucken soll.

Ein Problem, auf das ich gestoßen bin, ist, dass einige Tabellenrahmen nicht gedruckt werden, obwohl sie korrekt auf dem Bildschirm angezeigt werden.

Ich habe sowohl Firefox als auch Chrome ausprobiert. Beide zeigen alle Tabellenränder auf dem Bildschirm an, lassen jedoch einige der Ränder beim Drucken aus.

Was muss ich tun, um sie zu drucken?

EDIT 1: Added jsFiddle:

http://jsfiddle.net/Ax4qU/

Code:

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> 

Answer 1

Wie die Tabelle in neuem Fenster kopiert wird, CSS ist nicht beibehalten werden. Sie können dies umgehen, indem Sie in der Methode document.write() etwas relevantes CSS an das neue Fenster übergeben. Sie müssen auch eine kleine Menge an Polsterung bereitstellen, um die Ränder einzuführen. Siehe folgende JSFiddle dies in Aktion zeigt: 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(); 
} 

Answer 2

Ich denke, diese andere SO Frage, How to print inline CSS styles?, könnte die Antwort auf Ihre Frage halten.

Eine andere Sache, die Sie ausprobieren sollten, ist das Festlegen Ihres Stylesheets mit der Standard-Syntax <link rel="stylesheet" href="stylefile.css" type="text/css" media="print" >, sodass Sie ein oder mehrere Medienziele angeben (trennen Sie sie einfach durch ein Komma).

Answer 3

Versuchen Sie window.print() anstelle von printDiv(), weil Sie CSS nicht laden.

oder

CSS zu dieser auf den Kommentar

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

oder auf diese

@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; 
    } 
} 

Answer 4

Anknüpfend Aktualisierung von "KD" es sieht aus wie Sie nicht die CSS kopieren zu dem neuen Fenster. Meine Vermutung ist, dass Sie es so machen, dass nur die spezifische Tabelle auf der gesamten Seite gedruckt wird. Es gibt einen einfacheren Weg, dies zu tun, ein Druck-Stylesheet zu definieren, das jedes Element außer demjenigen, das Sie drucken möchten, negiert. Kein JavaScript und neue Fenster und Kopieren von etwas über benötigt wird.

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

myPrintStylesheet.css:

* { 
    display: none; 
} 

#table { 
    display: block; 
} 

Answer 5

die Sie interessieren, ersetzen YOUR.css mit Ihrem Link:

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);