vue-print-nb icon indicating copy to clipboard operation
vue-print-nb copied to clipboard

Tables not breaking properly

Open kevyn5 opened this issue 3 years ago • 1 comments

Hello, I am enjoying your work, however I have long tables and these are not breaking correctly during print after each page and one row bleeds into the next. If possible there is a way to separate whilst printing. I am using chrome for development.

table_not_breaking

kevyn5 avatar Jul 29 '21 07:07 kevyn5

1 page setup

The @page rule is used to specify some attributes of the printed page, including characteristics such as paper size, orientation, margins, and paging. ·

@page :pseudo-class { size: A4 landscape; margin:2cm; }

2 pagination

page-break-before: used to set the paging behavior in front of the element, possible values:

auto: The default value. If necessary, insert a page break before the element.

always: Insert a page break before the element.

avoid: Avoid inserting a page break before the element.

left: Enough page breaks before the element, up to a blank left page.

right: Enough page breaks before the element, up to a blank right page.

inherit: Specifies that the setting of the page-break-before attribute should be inherited from the parent element.

page-break-after: paging behavior after setting the element. The value is the same as page-break-before.

page-break-inside: Set the paging behavior inside the element. The values ​​are as follows:

auto: Default. If necessary, insert a page break inside the element.

avoid: Avoid inserting page breaks inside the element.

inherit: stipulates that it should be inherited from the parent element

page-break-inside: Setting of attributes.

@media print { section {page-break-before: always;} h1 {page-break-after: always;} p {page-break-inside: avoid;} }

dyywork avatar Aug 06 '21 05:08 dyywork