CODEWITHSUNDEEP
javascriptjqueryhtmlcsshtml-table
mashiah
mashiah

Reputation: 109

how can I adding page break just if needed

I have the following code with many tables which are dynamic in nature:

<div>
    <table>
        <tr></tr>
        <tr></tr>
        ...
    </table>  
    <table>
        <tr></tr>
        <tr></tr>
    </table>
 ...more tables
</div>

when I am printing the div element using javascript/ jquery, some of the tables are cut in the middle.

I try to use CSS (page-break-after / page-break-before) but then i get each table in separate page.

in addition, the height of each table is different for each user so we can't know the height of the table beforehand !!

Is there any way to break page just when needed ? just to prevent splitting ?

Upvotes: 1

Views: 1484

Answers (2)

Sunil B N
Sunil B N

Reputation: 4225

Add the following in CSS:

Requirement : Avoid breaks inside the table/row

<style type="text/css">
table tr,table th {
    page-break-inside: avoid;
}    
table {
    page-break-after: auto;
}
</style>

You can read more here

Upvotes: 1

kapantzak
kapantzak

Reputation: 11750

Try these rules:

table { 
  display:block; 
  page-break-inside:auto;
}
tr { 
  page-break-inside:avoid; 
  page-break-after:auto; 
}

Upvotes: 0

Related Questions