No frame on HTML table when printing

Question

I am working on a website that should print a table.

One problem I am facing is that some table borders will not be printed, although they are displayed correctly on the screen.

I tried both Firefox and Chrome. Both display all the borders of the table on the screen, but omit some borders when printing. A.

What do I need to do to print them?

EDIT 1: Added jsFiddle:

http://jsfiddle.net/Ax4qU/

the 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

Since the table is copied to a new window, your CSS is not saved. You can get around this by passing some relevant CSS to a new window in your document.write () method. You must also provide a small amount of indentation to enter borders. See the following JSFiddle showing this in action: 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

Try window.print() instead of printDiv() because you are not loading CSS.

or

updating your CSS to this

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

or to this

 @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 3

I think this is another SO question, How do I print inline CSS styles? may contain the answer to your question.

Another thing to try is to set the stylesheet using the standard syntax <link rel="stylesheet" href="stylefile.css" type="text/css" media="print" > to specify one or more targets multimedia (just separate them with a comma).

Answer 4

Following the “KD” comment, it looks like you are not copying CSS to a new window. I assume that you are doing this so that only that table is printed on the entire page. There is an easier way to do this, by defining a print style sheet that nullifies all the elements except the ones you want to print. No need for JavaScript and new windows and copying.

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

myPrintStylesheet.css:

 * { display: none; } #table { display: block; } 

Answer 5

Try this, replace YOUR.css with the 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);