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"/>