How to create page breaks automatically in CSS?

Question

I create a web page with table rows. It is looking good when i press print button. But sometimes page breaks are cutting page middle of the block. I tried to use tbody as this

<table>
...
<tbody>
<tr><td>sample datea 1</td></tr>
<tr><td>sample datea 2</td></tr>
<tr><td>sample datea 3</td></tr>
</tbody>
<tbody>...</tbody>
...
</table>

When i want to print page it writes as

//first page  
sample datea 1 
sample datea 2 
// second page
sample datea 3

I want to cut after sample datea 3 . I tried to add blokla's div tag CSS as

.blokla{display:block;page-break-inside:avoid; page-break-after:auto}

How can i break page between div tags or another ? My main problem is below.

enter image description here

see [Using CSS and/or jQuery for Printed Pages with Page Breaks](http://stackoverflow.com/questions/4878013/using-css-and-or-jquery-for-printed-pages-with-page-breaks) for your answer — sachin.ph, Apr 27 '15 at 12:29

glend · Answer 1 · 2015-04-27T14:32:51.847

1

The CSS you have is valid and works on my end.

However the problem you have is that you are creating two <tbody> tags in a single table. This practice is not "valid" HTML (it is valid). Use only one <tbody> and use this CSS;

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

Changing the CSS in this way ensures for maximum flexibility in your HTML, presentation for each row will now remain together.

edited Apr 27 '15 at 14:32

answered Apr 27 '15 at 13:05

glend

1,592
1
17
36

I don't think that's valid either. Why are you reluctant to use the `page-break-inside` rule on the ``? – glend Apr 27 '15 at 13:47
3

You can use multiple `tbody` tags inside `table` http://www.w3.org/TR/html-markup/table.html – adriano66 Apr 27 '15 at 13:57
I can add tr but it is not good to me . I need group every 5 tr in a tbody group – enderaric Apr 27 '15 at 14:29
I would, in that case, use separate tables and put the rule on the `` element.
– glend Apr 27 '15 at 14:36

score 0 · Accepted Answer · answered Apr 27 '15 at 14:54

0

I solved this question with this code

tbody{page-break-inside:avoid; page-break-after:auto; position:relative;
display:block;}

It is working fine.

answered Apr 27 '15 at 14:54

enderaric

142
4
15

You can get rid of the `page-break-after:auto;` and `position:relative;`. Also, this solution will only work if: a) all of the data in each column is exactly the same width, or b) you set widths on the `td` elements in each `tbody`, and don't add any content that exceeds those widths. – DoctorDestructo Apr 29 '15 at 23:50

How to create page breaks automatically in CSS?

2 Answers2

Linked