Question

I am using the editable invoice template to make the invoice. It looks great on the browser but when a certain number of item is added in the table, the bottom part(as attached in image) becomes cut like that. How do i fix this? I want it to automatically printed to second page when the item is many, and printed on the first page when it fits well.

Thanks!

Answer 1

For tables you should use <thead>, <tbody> and <tfoot> Tags. While you should experiment if you need <tfoot>. The other two are quite useful. The headline of your table will be repeated on every page which will make your table not look so much cut. <tfoot> will also copy the what you define as footer on every page, which may not be desired.

For divs you should experiment with page-break-before or page-break-after CSS commands. While these will not help you if you have a page filling div they may help you on smaller ones.