Reputation: 2907
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:
Upvotes: 5
Views: 2568
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
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
Reputation: 745
you can use this code
@media print {
table.table tfoot {
display: none;
}
}
Upvotes: 1
Reputation: 188
It can be hidden with media queries
@media print {
tfoot {
display: none;
}
}
jsFiddle: https://jsfiddle.net/kawal/9afb3scw/4/
Upvotes: 0