Webmasters Stack Exchange is a question and answer site for pro webmasters. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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?

share|improve this question
up vote 6 down vote accepted

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;
share|improve this answer
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. – Ben Hoffman Aug 26 '10 at 12:01
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

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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