nessun bordo sulla tabella HTML durante la stampa

Question

Sto lavorando al sito Web che si suppone stampi la tabella.

Un problema che sto incontrando è che alcuni bordi della tabella non verranno stampati, anche se sono visualizzati correttamente sullo schermo.

Ho provato sia Firefox che Chrome. Entrambi visualizzano tutti i bordi della tabella sullo schermo, ma omettono alcuni bordi durante la stampa.

Cosa devo fare per farli stampare?

EDIT 1: Aggiunto jsFiddle:

http://jsfiddle.net/Ax4qU/

Codice:

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

Come la tabella viene copiato in una nuova finestra, il CSS è non viene mantenuto. Puoi aggirare questo passando alcuni CSS pertinenti alla nuova finestra nel tuo metodo document.write(). È inoltre necessario fornire una piccola quantità di padding per introdurre i bordi. Si veda il seguente JSFiddle che mostra in azione: 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

Penso che questa altra domanda SO, How to print inline CSS styles?, potrebbe contenere la risposta alla tua domanda.

Un'altra cosa da provare è impostare il foglio di stile utilizzando la sintassi standard <link rel="stylesheet" href="stylefile.css" type="text/css" media="print" > in modo da specificare uno o più target multimediali (è sufficiente separarli con una virgola).

Answer 3

Prova window.print() anziché printDiv() perché non stai caricando CSS.

o

l'aggiornamento del CSS per questo

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

oa questo

@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

In seguito al commento di "KD" Sembra che non stai copiando il CSS fino alla nuova finestra. La mia ipotesi è che lo stai facendo in questo modo solo la tabella specifica sull'intera pagina viene stampata. C'è un modo più semplice per farlo, definire un foglio di stile di stampa che annulli tutti gli elementi tranne quello che si desidera stampare. Non è necessario JavaScript e nuove finestre e non è necessario copiare nulla.

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

myPrintStylesheet.css:

* { 
    display: none; 
} 

#table { 
    display: block; 
} 

Answer 5

Prova questa, sostituire YOUR.css con il tuo 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);