Hide table columns when printing

Tonight I needed to work out how I could remove columns when printing.

I have been using ColGroups and Col elements to define my column widths but found that applying display: none to them didn't hide them when printing.

I found out that when using

display:none

the cells actually get removed from the layout when printing. This screws up all of the html and the table looks like crap.

What I needed to do was define a noPrint class for table elements and one for all other elements.

What I ended up with was the following:

.noPrint {
    display: none;
}

col.noPrint {
    display: table-column !important;
    visibility: collapse;
}

It is good practice to assign classes to COL elements and not specific styles.

<col class="noPrint"/>