CODEWITHSUNDEEP
csshtml-table
user1588241
user1588241

Reputation: 131

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.

Upvotes: 7

Views: 13216

Answers (3)

Raj Kumar
Raj Kumar

Reputation: 61

Table Screen Shot

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

Upvotes: 0

Guppy
Guppy

Reputation: 426

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

.noprint {
display: none;
}

Upvotes: 1

user2670996
user2670996

Reputation: 2674

This works for me:

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

Upvotes: 16

Related Questions