CODEWITHSUNDEEP
htmlcssdatatabledatatables
Hello World
Hello World

Reputation: 2907

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:

enter image description here

Upvotes: 5

Views: 2568

Answers (4)

Hello World
Hello World

Reputation: 2907

Its simple, just add <tbody></tbody> in the middle of thead and tfoot.

here is the revised code:

<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>
        <tbody></tbody> <!-- add this line here so that when the data is added through datatable, it doesn't show it on top of the page (which is shown in the image) -->
        <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>

and add following css:

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

Upvotes: 0

Ryan
Ryan

Reputation: 541

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.

Upvotes: 15

Piyush Teraiya
Piyush Teraiya

Reputation: 745

you can use this code

@media print {
    table.table tfoot {
        display: none;
    }
}

Upvotes: 1

Kawaljit Singh
Kawaljit Singh

Reputation: 188

It can be hidden with media queries

 @media print {
    tfoot {
      display: none;
    }
 }

jsFiddle: https://jsfiddle.net/kawal/9afb3scw/4/

Upvotes: 0

Related Questions