how to make printable version of a webpage?

Question

I would like to make a printable version of my web page. I have already tried using CSS to make a separate stylesheet for the page but it is not working properly.(i.e. it will not get rid of margin at the top also the menu bar background will not go away.) the page consists of hundreds of tables and when i do a print preview they also get split between pages sometimes.

these tables are generated dynamically according to users choices in checkboxes is it possible to add a printable link which will take the content from the current page and put it into a page where it can be mad more printer friendly?

Answer 1

You can make printer friendly version of your page with @media print

@media print {
        your styles here
}

For example in Foundation they have the basic rules to which you can add anything of your own:

@media print {
    * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important;
    -ms-filter: none !important; } /* Black prints faster: sanbeiji.com/archives/953 */
    p a, p a:visited { color: #444 !important; text-decoration: underline; }
    p a[href]:after { content: " (" attr(href) ")"; }
    abbr[title]:after { content: " (" attr(title) ")"; }
    .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
    pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
    thead { display: table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */
    tr, img { page-break-inside: avoid; }
    @page { margin: 0.5cm; }
    p, h2, h3 { orphans: 3; widows: 3; }
    h2, h3{ page-break-after: avoid; }
    .hide-on-print { display: none !important; }
    .print-only { display: block !important; }
}