Yazdırırken HTML tablosunda kenarlık yok

Question

Tablo yazdırması beklenen web sitesinde çalışıyorum.

Karşılaştığım bir sorun, ekranda doğru şekilde görüntülenmesine rağmen, bazı tablo kenarlıklarının yazdırılmayacağıdır.

Hem Firefox'u hem de Chrome'u denedim. Her ikisi de tüm tablo kenarlarını ekranda görüntüler, ancak yazdırırken kenarlıkların bir kısmını atlar.

Bunları yazdırmak için ne yapmam gerekiyor?

DÜZENLEME 1: Katma jsFiddle:

http://jsfiddle.net/Ax4qU/

Kodu:

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

, CSS olan korunmamak. Belli bir CSS'yi document.write() yönteminizdeki yeni pencereye aktararak bunu aşabilirsiniz. Ayrıca sınırları tanıtmak için az miktarda dolgu sağlamanız gerekir. O emin Ayrıca Kopyalanan alıyorsanız tüm css vardır, 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

Sanırım bu diğer soru, How to print inline CSS styles?, sorunuzun cevabını tutabilir.

Denemek istediğiniz diğer bir şey de, standart sayfanızı standart <link rel="stylesheet" href="stylefile.css" type="text/css" media="print" > sözdizimini kullanarak ayarlamaktır, böylece bir veya daha fazla medya hedefi belirlersiniz (yalnızca virgülle ayırın).

Answer 3

printDiv() yerine CSS yüklemediğiniz için window.print() deneyin. CSS kopyalama değiliz benzeri ile yorumum takibi bu

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

veya bu

@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

için CSS güncellenmesi

veya

"KD" görünüyor yeni pencereye. Tahminimce bu şekilde yapıyorsunuz, bu yüzden sadece tüm sayfadaki belirli tablo yazdırılıyor. Bununla ilgili daha kolay bir yol var, yazdırmak istediğinizi hariç tüm öğeleri engelleyen bir yazdırma stil sayfası tanımlayın. JavaScript ve yeni pencere yok ve herhangi bir şeyi kopyalamak gerekiyor.

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

myPrintStylesheet.css:

* { 
    display: none; 
} 

#table { 
    display: block; 
} 

Answer 5

, bu deneyin bağlantıya sahip YOUR.css değiştirin: tablo yeni pencerede kopyalanan edilirken

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