As part of a application, I need to be able to print the contents of a div. I created a div and button to print it.

When I click on the print button I created, the page becomes unresponsive.

Does anyone know what is the problem?

button:

<a onclick="printDiv('user-table')">print</a>

script.js

    function printDiv(divName) {
        var printContents = document.getElementById(divName).innerHTML;
        var originalContents = document.body.innerHTML;

        document.body.innerHTML = printContents;

        window.print();

        document.body.innerHTML = originalContents;
    }

my print css:

@media print {
    .user-table {
        border-collapse: collapse;
        width: 100%;
        font-size: 0.9em;
        border-radius: 5px 5px 0 0;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
        table-layout: fixed;
    }

    .table .title {
        font-weight: bold;
        font-size: 18px;
        color: #1da1f2;
    }

    .user-table thead tr {
        color: #111;
        text-align: left;
        font-weight: bold;
    }

    .user-table thead tr th:first-child {
        width: 10px;
    }

    .no-print {
        display: none !important;
    }

    .user-table tr {
        border: 1px solid #ddd;
        padding: 0.35em;
    }

    .user-table th,
    .user-table td {
        padding: 12px 15px;
        text-align: center;
    }

    .user-table tbody tr {
        border-bottom: 1px solid #dddddd;
    }

    .user-table tbody tr:nth-of-type(even) {
        background-color: #f3f3f3;
    }

    .user .user-table tbody tr:last-of-type {
        border-bottom: 2px solid #1da2f2;
    }

    .user-table th {
        font-size: 0.85em;
        letter-spacing: 0.1em;
        text-transform: uppercase;
    }
}