không có đường viền trên bảng HTML khi in

Question

Tôi đang làm việc trên trang web có nghĩa vụ in bảng.

Một vấn đề mà tôi đang gặp phải là một số đường viền bảng sẽ không được in, mặc dù chúng được hiển thị chính xác trên màn hình.

Tôi đã thử cả Firefox và Chrome. Cả hai hiển thị tất cả các đường viền bảng trên màn hình, nhưng bỏ qua một số đường viền khi in.

Tôi cần làm gì để in chúng?

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

Như bảng đang được sao chép vào một cửa sổ mới, CSS của bạn là không được giữ lại. Bạn có thể giải quyết vấn đề này bằng cách chuyển một số CSS có liên quan đến cửa sổ mới trong phương thức document.write() của bạn. Bạn cũng cần phải cung cấp một lượng nhỏ đệm để giới thiệu các biên giới. Xem JSFiddle sau đây cho thấy điều này trong hành động: 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

Tôi nghĩ câu hỏi SO khác, How to print inline CSS styles?, có thể giữ câu trả lời cho câu hỏi của bạn.

Một điều khác cần thử là đặt biểu định kiểu của bạn sử dụng cú pháp chuẩn <link rel="stylesheet" href="stylefile.css" type="text/css" media="print" > để bạn chỉ định một hoặc nhiều mục tiêu phương tiện (chỉ cần phân tách chúng bằng dấu phẩy).

Answer 3

Hãy thử window.print() thay vì printDiv() vì bạn không tải CSS.

hoặc

cập nhật CSS của bạn vào đó

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

hay này

@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

Theo dõi trên bình luận bằng cách "KD" có vẻ như bạn đang không sao chép CSS qua cửa sổ mới. Tôi đoán là bạn đang làm theo cách này để chỉ có bảng cụ thể trên toàn bộ trang được in. Có một cách dễ dàng hơn để thực hiện việc này, xác định bảng định kiểu in phủ nhận mọi phần tử ngoại trừ phần tử bạn muốn in. Không có JavaScript và cửa sổ mới và sao chép bất cứ điều gì trên là cần thiết.

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

myPrintStylesheet.css:

* { 
    display: none; 
} 

#table { 
    display: block; 
} 

Answer 5

Hãy thử điều này, thay thế YOUR.css với liên kết của bạn:

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