Hiding HTML media when printing
===

I am currently working on a printable document using HTML which will display data pulled from a database. The idea is that I will use HTML/CSS to make the document look nice, but it will be exclusively for printing.

The document is laid out using tables to control how the data from the database appears.

One of the key requirements is that the document must only cover 2 sides of A4. However, the data we get from the database is somewhat unpredictable, as the field sizes are very large, so we can't guarantee that one row from the database will equal one row in the document.

THerefore, we want to use a solution where the size of the table is controlled by HTML and any output from the database that causes the table to be larger than defined should be hidden. 

I've got the following CSS style defined

    table.noQual
    {
    page-break-inside: avoid;
    width: 100%;
    border: 0px;
    font-family:"Verdana","sans-serif";color:black;
    overflow-y:hidden;
    display:block;
    max-height:50px !important;
    }

This works perfectly on screen, but when I print, all the database content is displayed, so the tables become larger than 50px and go over the page.

How can I make the content hidden from the printer as well as the screen?




