How to prevent table borders from disappearing while printing?

Question

I'm just working at a website that is supposed to be printable.

One problem I'm running into is that some table borders won't be printed, although they are correctly displayed on screen.

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

What do I need to do to get them printed?

Answer 1

Consider creating a style sheet for print media which utilizes the table's border property instead of cell spacing and background color - the following should generate a visible border when printing:

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 2

Have you specified a print stylesheet, or a print @media section inside your existing stylesheet?

By default a stylesheet will work on-screen fine (as you've have discovered); However unless you explicitly specify a print CSS Stylesheet, when printing the page out, it will default to the browsers default styling (usually 15pt Times New Roman etc.).

Solution 1: Add a second, print stylesheet Include both tags below in your HTML head:

<link rel="stylesheet" type="text/css" href="screenstyles.css" media="screen" /> <link rel="stylesheet" type="text/css" href="printstyles.css" media="print" />

Then copy the required formatting styles from screenstyles.css to printstyles.css (or just make both 's link to your screen stylesheet).

Solution 2: Only 1 stylesheet, but has print @media in it Your single CSS stylesheet would like like this (omit the media="" from your css link rel tag

Answer 3

your CSS is not being retained in new print window. Pass some relevant CSS to the new window, write that css in your document.write() method.

$("#print").on('click', function() {
var printContents = document.getElementById('p-table').innerHTML;

var htmlToPrint = '' +
'<style type="text/css">' +
'table {' +
  'border-collapse: collapse;' +
  '}'+
'table tr {' +
'border-top: 1px solid gray !important;' +
'}' +
'</style>';

PrintHtml += printContents;
nWindow.document.write(PrintHtml);
nWindow.print();
nWindow.close();
}