Stop showing table footer in every page print css

I have a very long table in an HTML page. When I am printing the page the table footer tfoot is showing on each page at the bottom. But I want it to show in the last page only

In some tables, I didn't write any tbody because I used datatable to fill the data.

When I have added below code. The tbody is showing 1st then tfoot and the tbody content is showing.

Is there any CSS to show the tfoot at last but does not repeat in every page when printing??

table.table tfoot {
    display: table-row-group;
}

The Table HTML:

<table style="width: 100%;" id="customer_payment_view" class="customer_payment_view table table-hover table-bordered">
        <thead>
            <tr>
                <th>Id</th>
                <th>Agency Name</th>
                <th>Customer Name</th>
                <th>Date</th>
                <th>Bill No</th>
                <th>Discount</th>
                <th style="display: none;">Adjustment</th>
                <th>Pay Amount</th>
                <th>Pay Method</th>
                <th>Paid Through</th>
                <th>Remarks</th>
                <th>Action</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th style="display: none;"></th>
                <th class="7">Pay Amount</th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
            </tr>
        </tfoot>
    </table>

Here is the result:

You can use media queries to render the tfoot as if it were a tbody.

@media print {
    table.table tfoot {
        display: table-row-group;
    }
}

This way it only appears at the end of the table.