How to create page breaks automatically in CSS?


Tags: html,css,printing

Problem :

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



Solution :

I solved this question with this code

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

It is working fine.


    CSS Howto..

    How to implement the button css like Spotify play button in the table row

    How to float all child divs to center inside a parent div?

    How to make a responsive scrollbar?

    How to apply css to div which has no class?

    GWT - How to create a drop down menu

    How to use image tag in body of html instead of loading image from css?

    How to automatically update relative CSS paths for minification?

    CSS - How to set an elements height as a % of a container with auto height?

    How to make a CSS transition work “backwards”?

    How to include display:block in css code that includes pseudo element 'before'

    How to embed video on my first website

    How do I get an element to always occupy a specific percentage of its parent element, even when the browser is resized?

    how to add equal empty spaces between images

    How to make div width almost 100%

    How do I stop the text from moving when hovered? (background-image is involved)

    asp.net+css+jQuery - how does it all work together?

    How to order rows (or divs) vertically using blueprint css?

    How do i rotate text in css

    How to use base css file using twig

    How to design a comment box similar to facebook using only CSS?

    How to test a webpage for different aspect ratios

    How to manage css files the best way

    How to redirect using css? [duplicate]

    How to apply css to top level element only

    How to make all divs same height, based on text content?

    How to style the last element before another specific element in CSS? [duplicate]

    How to change class of valid form field - jQuery form validation plugin

    How To Have Margin For Background Image?

    How to create a dynamic box with shadow - using PNG pictures

    Align lists on showing or hiding