Table edges disappear in printing

Asked

Viewed 16 times

-1

Good evening to all. I am trying to print a 'div' that contains a table with borders. However, the table loses the border on the printing screen. tried to use@media print, but failed. I created a function to print the div, it is called through the print button.

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();
}
table{
            border-collapse: collapse;
        }
        table td{

            border: 1px solid black;
        }
        @media print{
            table td{
                border: 1px solid black;
            }
        }
        .pp{
            width: 30px;
        }
<head>
    <title>Imprimir</title>
</head>
<body>
    <input type="button" onclick="cont('print');" value="Imprimir">
    <div id="print">
        <table>
            <tr>
                <th>nome</th>
                <th>email</th>
                <th>telefone</th>
                <th>P</th>
                <th>F</th>
                <th>FJ</th>
            </tr>   
            <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>
        </table>
    </div>
</body>

javascript css

1 answer

0

Hello, this happens because the function will only print the values for printing, and not the borders because it is part of the code . css . The best will be to search for a converter to generate a pdf that laws the . css

  • Thanks Miguel for the answer, but you’d have an idea how to do it, I don’t even know where to start.

Browser other questions tagged javascript css

You are not signed in. Login or sign up in order to post.