CSS hide table column for print

问题

I have table data and last column contains links for actions on that data. I would like that last column not visible when someone prints the page.

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

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

But it doesn't work for print: I don't see the column, but there is empty space where it was.

回答1:

This works for me:

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

回答2:

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

.noprint {
display: none;
}

回答3:

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();
}

来源：https://stackoverflow.com/questions/13649569/css-hide-table-column-for-print