CSS hides column for printing

Question

I have table data, and the last column contains links for actions on this data. I would like the last column not to appear when someone prints the page.

I tried the following and it works on the screen (I don’t see the last column, and the rest of the columns are evenly distributed to fill this space).

@media print { table td:last-child {display:none} } 

But this does not work for printing: I do not see the column, but there is empty space.

Answer 1

This works for me:

  @media print { table td:last-child {display:none} table th:last-child {display:none} } 

Answer 2

There is a more universal solution that can be applied in many different elements. Create a print.css file with:

 .noprint { display: none; } 

Answer 3

Using jQuery

 $("element").click(function(){ $("td:last-child").remove(); }); 

Edit: Then maybe visibility:collapse in css style will help

Answer 4

Print Button Code

 function PrintData() { var divToPrint1 = document.getElementById("editable"); var divToPrint = divToPrint1; divToPrint.border = 1; divToPrint.cellSpacing = 0; divToPrint.cellPadding = 2; divToPrint.style.borderCollapse = 'collapse'; newWin = window.open(); newWin.document.write(getHeader()); newWin.document.write("<h3 align='center'>Master Designation List </h3>"); $('tr').children().eq(3).hide(); $('table tr').find('td:eq(3)').hide(); newWin.document.write(divToPrint.outerHTML); newWin.print(); $('tr').children().eq(3).show(); $('table tr').find('td:eq(3)').show(); newWin.close(); }