CSS Minha tabela perde a borda na hora da impressão.

cisneiro · 17 de novembro de 2020

Boa noite a todos. Galera estou tentando imprimir uma 'div' que contém uma tabela com bordas. Porém a tabela perde a borda na tela de impressão. tentei usar '@media print', porém sem sucesso. Criei uma função para imprimir a div, ela é chamada através do botão imprimir.

<!DOCTYPE html>
<html>
<head>
	<title>Imprimir</title>
	
	<style type="text/css">
		table{
			border-collapse: collapse;
		}
		table td{

			border: 1px solid black;
		}
		@media print{
			table td{
				border: 1px solid black;
			}
		}
		.pp{
			width: 30px;
		}
	</style>
</head>
<body>
	<input type="button" onclick="cont('print');" value="Imprimir">
<div id="print">
	<table>
		
			
				<th>nome</th>
				<th>email</th>
				<th>telefone</th>
				<th>P</th>
				<th>F</th>
				<th>FJ</th>
			
		
		
			<tr>
				<td>Allan da costa</td>
				<td>[email protected]</td>
				<td>(21)97339-1150</td>
				<td class="pp"></td>
				<td class="pp"></td>
				<td class="pp"></td>
			</tr>
			<tr>
				<td>Allan da costa</td>
				<td>[email protected]</td>
				<td>(21)97339-1150</td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td>Allan da costa</td>
				<td>[email protected]</td>
				<td>(21)97339-1150</td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td>Allan da costa</td>
				<td>[email protected]</td>
				<td>(21)97339-1150</td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td>Allan da costa</td>
				<td>[email protected]</td>
				<td>(21)97339-1150</td>
				<td></td>
				<td></td>
				<td></td>
			</tr>

		
	</table>
</div>
</body>
</html>
<script>
function cont(div){
   var conteudo = document.getElementById(div).innerHTML;
   tela_impressao = window.open('about:blank');
   tela_impressao.document.write(conteudo);
   tela_impressao.window.print();
   tela_impressao.window.close();
}
</script>

joseph_dev · 17 de novembro de 2020

Na janela de impressão do navegador, veja se esta opção está marcada:

Mais definições >> Opções >> Gráficos de Segundo Plano

*Navegador Google Chrome

GabrielSennaMs · 17 de novembro de 2020

@cisneiro Bom o que falta é você passar o CSS para a página/Janela, que você cria para fazer a impressão.

Não é a melhor forma de fazer, mas funciona:

   let 
        conteudo = document.getElementById(div).innerHTML,
        style = document.getElementsByTagName('style'),
        tela = window.open('about:blank');


    tela.document.write(conteudo);
    tela.document.body.append(style[0]);
    tela.print();
    tela.close();