Cột ẩn CSS để in

Question

Tôi có dữ liệu bảng và cột cuối cùng chứa các liên kết cho các tác vụ trên dữ liệu đó. Tôi muốn cột cuối cùng không hiển thị khi ai đó in trang.

Tôi đã thử làm như sau và nó hoạt động trên màn hình (không nhìn thấy cột cuối cùng, và phần còn lại của các cột đều được trải đều để lấp đầy không gian đó).

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

Nhưng nó không hoạt động để in: Tôi không thấy cột, nhưng có không gian trống ở đó.

Answer 1

Sử dụng JQuery

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

Edit: Sau đó, có lẽ visibility:collapse trong phong cách css sẽ giúp

Answer 2

này làm việc cho tôi:

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

Answer 3

Có một giải pháp phổ biến hơn có thể được áp dụng trong nhiều yếu tố khác nhau. Tạo một file print.css với:

.noprint { 
display: none; 
} 

Answer 4

nút Print đang

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