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?


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;
  • Also print preview should be an accurate image of what will be printed, not what is on your screen. Screen resolution usually doesn't match up well with paper width. Aug 26 '10 at 12:01
  • 1
    Turns out "!important" didn't make a difference, but the linked article lead to the right answer: In Firefox the margin caused the left and right border to be off sheet, and therefore not printed even though it was visible on screen. In Chrome screen and printed content was identical, the lines were actually missing on screen due to empty cells, which I didn't notice until I started testing the "!important". Thanx a lot! :)
    – lyle
    Aug 27 '10 at 6:43

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


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

PrintHtml += printContents;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.