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