...
 
Commits (14)
{
"name": "pagedjs",
"version": "0.1.43",
"name": "@ggrossetie/pagedjs",
"version": "0.1.43-next.1615881898",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
......@@ -4985,9 +4985,9 @@
"dev": true
},
"elliptic": {
"version": "6.4.0",
"resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.4.0.tgz",
"integrity": "sha1-ysmvh2LIWDYYcAPI3+GT5eLq5d8=",
"version": "6.5.3",
"resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.3.tgz",
"integrity": "sha512-IMqzv5wNQf+E6aHeIqATs0tOLeOTwj1QKbRcS3jBbYkl5oLAserA8yJTT7/VyHUYG91PRmPyeQDObKLPpeS4dw==",
"dev": true,
"requires": {
"bn.js": "^4.4.0",
......@@ -8766,9 +8766,9 @@
}
},
"lodash": {
"version": "4.17.15",
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz",
"integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==",
"version": "4.17.20",
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz",
"integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==",
"dev": true
},
"lodash.sortby": {
......@@ -9017,9 +9017,9 @@
"dev": true
},
"moment": {
"version": "2.25.1",
"resolved": "https://registry.npmjs.org/moment/-/moment-2.25.1.tgz",
"integrity": "sha512-nRKMf9wDS4Fkyd0C9LXh2FFXinD+iwbJ5p/lh3CHitW9kZbRbJ8hCruiadiIXZVbeAqKZzqcTvHnK3mRhFjb6w==",
"version": "2.27.0",
"resolved": "https://registry.npmjs.org/moment/-/moment-2.27.0.tgz",
"integrity": "sha512-al0MUK7cpIcglMv3YF13qSgdAIqxHTO7brRtaz3DlSULbqfazqkc5kEjNrLDOM7fsjshoFIihnU8snrP7zUvhQ==",
"dev": true
},
"ms": {
......@@ -10125,22 +10125,28 @@
}
},
"rollup-plugin-license": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/rollup-plugin-license/-/rollup-plugin-license-2.1.0.tgz",
"integrity": "sha512-HvwwqCbG+//hAwGxOce+XadsEooq79SqDu3z2GTwU2y1rFQ/uqT5JbCzcmauFII+nKZ0/N2BzG76ZuP7OdfU7A==",
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/rollup-plugin-license/-/rollup-plugin-license-2.2.0.tgz",
"integrity": "sha512-xXb1vviEwlJMX+VGUSsglcMA/Rh9d2QzEm94awy4FlnsPqGrXoTYYGOR3UXR6gYIxiJFkr7qmkKF/NXfre/y8g==",
"dev": true,
"requires": {
"commenting": "1.1.0",
"glob": "7.1.6",
"lodash": "4.17.15",
"lodash": "4.17.19",
"magic-string": "0.25.7",
"mkdirp": "1.0.4",
"moment": "2.25.1",
"moment": "2.27.0",
"package-name-regex": "1.0.8",
"spdx-expression-validate": "2.0.0",
"spdx-satisfies": "5.0.0"
},
"dependencies": {
"lodash": {
"version": "4.17.19",
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.19.tgz",
"integrity": "sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ==",
"dev": true
},
"magic-string": {
"version": "0.25.7",
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.7.tgz",
......@@ -10925,9 +10931,9 @@
},
"dependencies": {
"bl": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/bl/-/bl-4.0.2.tgz",
"integrity": "sha512-j4OH8f6Qg2bGuWfRiltT2HYGx0e1QcBTrK9KAHNMwMZdQnDZFk0ZSYIpADjYCB3U12nicC5tVJwSIhwOWjb4RQ==",
"version": "4.0.3",
"resolved": "https://registry.npmjs.org/bl/-/bl-4.0.3.tgz",
"integrity": "sha512-fs4G6/Hu4/EE+F75J8DuN/0IpQqNjAdC7aEQv7Qt8MHGUH7Ckv2MwTEEeN9QehD0pfIDkMI1bkHYkKy7xHyKIg==",
"dev": true,
"requires": {
"buffer": "^5.5.0",
......
{
"name": "pagedjs",
"version": "0.1.43",
"name": "@ggrossetie/pagedjs",
"version": "0.1.43-next.1615881898",
"description": "Chunks up a document into paged media flows and applies print styles",
"author": "Fred Chasen",
"license": "MIT",
......@@ -32,7 +32,7 @@
"rollup": "^2.13.1",
"rollup-plugin-commonjs": "^10.1.0",
"rollup-plugin-json": "^4.0.0",
"rollup-plugin-license": "^2.1.0",
"rollup-plugin-license": "^2.2.0",
"rollup-plugin-livereload": "^1.3.0",
"rollup-plugin-node-builtins": "^2.1.2",
"rollup-plugin-node-resolve": "^5.2.0",
......@@ -59,5 +59,8 @@
"files": [
"dist",
"lib"
]
],
"publishConfig": {
"access": "public"
}
}
<!DOCTYPE html PUBLIC>
<html lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>
Break inside avoid
</title>
<script src="../../../../../dist/paged.polyfill.js"></script>
<script src="../../../../dist/paged.polyfill.js"></script>
<style>
@page {
size: 6in 8in;
margin: 20mm 20mm;
......@@ -21,14 +17,11 @@
}
}
h1, p {
break-inside: avoid;
}
/* style and interface */
* { font-family: Times New Roman, sans-serif; }
:root { font-size: 18px; }
......@@ -59,22 +52,10 @@
margin-top: 10mm;
margin-left: 10mm;
}
}
</style>
</head>
<body>
<section>
<p>Nam eros tellus, hendrerit ut rhoncus sed, aliquet et felis. Cras a ex malesuada, fringilla magna elementum, cursus purus. Etiam fringilla leo non diam congue tempor. Ut laoreet, est eget blandit congue, mauris magna cursus sapien, dictum tempus sapien diam et dolor. Vestibulum vel egestas velit. Pellentesque vel consectetur urna, eu consequat odio. Sed ac pretium magna, ut ultrices tortor.</p>
<h1>Cras ut augue condimentum, egestas nisi in, dictum erat. Nullam tincidunt tincidunt tempor. Sed in eleifend nibh, sit amet feugiat nisi. Cras at ante ut urna sagittis dictum ut nec elit. In feugiat euismod massa sagittis dictum. Nullam eu nisl eu elit laoreet tincidunt id sed ligula. Praesent vulputate faucibus nibh, ut ultrices nunc aliquam nec. Mauris et condimentum ligula. Vestibulum nec tortor quis urna dictum luctus. Cras quis suscipit metus. Ut dignissim ullamcorper aliquam. Donec condimentum eu tellus at interdum.</h1>
......@@ -83,8 +64,5 @@
<p>Nam eros tellus, hendrerit ut rhoncus sed, aliquet et felis. Cras a ex malesuada, fringilla magna elementum, cursus purus. Etiam fringilla leo non diam congue tempor. Ut laoreet, est eget blandit congue, mauris magna cursus sapien, dictum tempus sapien diam et dolor. Vestibulum vel egestas velit. Pellentesque vel consectetur urna, eu consequat odio. Sed ac pretium magna, ut ultrices tortor.</p>
<p>Nulla dignissim pellentesque magna ac maximus. Integer id tincidunt erat. Sed elementum posuere augue, quis pharetra mi vehicula in. Nullam rhoncus mi quis lectus gravida dignissim. Pellentesque a tortor ut leo pretium auctor non in massa. Nunc efficitur vestibulum mi, id mattis quam aliquet id. Ut semper tortor sit amet molestie mattis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec laoreet eleifend purus ut sagittis. Nunc consequat vel sapien at convallis. Maecenas sollicitudin quis justo non varius.</p>
</section>
</body>
</html>
<!DOCTYPE html PUBLIC>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>exceeding-rowspan-table</title>
<script src="../../../../dist/paged.polyfill.js"></script>
<style>
@page {
size: 600px 600px;
border: 1px solid #cfc2c2;
}
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
tr, td {
break-inside: avoid;
}
</style>
</head>
<body>
<table>
<colgroup>
<col style="width: 15%;">
<col style="width: 10%;">
<col style="width: 25%;">
<col style="width: 15%;">
<col style="width: 10%;">
<col style="width: 25%;">
</colgroup>
<tbody>
<tr>
<td colspan="6"><p><strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aenean dignissim odio eget justo lacinia, vel accumsan nulla interdum.
Nunc dapibus dapibus pulvinar. Aliquam pellentesque leo et ullamcorper euismod.
Proin nec hendrerit augue. Integer sit amet congue ex.
Integer sollicitudin condimentum ultricies.</strong></p></td>
</tr>
<tr>
<td colspan="6"><p><strong>5. Lorem ipsum dolor sit amet</strong></p></td>
</tr>
<tr>
<td colspan="2"><p>5.1. Lorem ipsum dolor sit amet</p></td>
<td colspan="4"><p>Aenean dignissim odio eget justo lacinia, vel accumsan nulla interdum.</p></td>
</tr>
<tr>
<td colspan="6"><p>6. Nunc dapibus dapibus pulvinar. Aliquam pellentesque leo et ullamcorper euismod.</p></td>
</tr>
<tr>
<td colspan="2"><p>hendrerit</p></td>
<td colspan="2"><p>condimentum</p></td>
<td colspan="2"><p>ultricies</p></td>
</tr>
<tr>
<td colspan="2"><p>nec hendrerit augue</p></td>
<td colspan="2"><p>Aliquam pellentesque leo</p></td>
<td><p><em><em></em></em></p></td>
<td><p>vel accumsan nulla </p></td>
</tr>
<tr>
<td colspan="2"><p>psum dolor sit amet</p></td>
<td colspan="2"><p>(зав. № <em><em>_ ), инв. № </em><em></em></em></p></td>
<td><p><em><em></em></em></p></td>
<td><p>ullamcorper</p></td>
</tr>
<tr>
<td colspan="2"><p>dignissim odio</p></td>
<td colspan="2"><p> ullamcorper euismod</p></td>
<td><p><em><em></em></em></p></td>
<td><p>justo lacinia</p></td>
</tr>
<tr>
<td colspan="6"><p><strong>7. Integer sit amet congue ex.</strong></p></td>
</tr>
<tr>
<td colspan="2"><p>7.1. Dignissim odio eget justo lacinia.</p></td>
<td colspan="4"><p>Nunc dapibus dapibus pulvinar. Aliquam pellentesque leo et ullamcorper euismod.
Proin nec hendrerit augue. Integer sit amet congue ex.</p></td>
</tr>
</tbody>
</table>
</body>
</html>
const TIMEOUT = 10000;
describe("rowspan uneven table", () => {
let page;
beforeAll(async () => {
page = await loadPage("breaks/break-inside/break-inside-avoid/exceeding-rowspan-table.html");
return page.rendered;
}, TIMEOUT);
afterAll(async () => {
if (!DEBUG) {
await page.close();
}
});
if (!DEBUG) {
it("should create a pdf", async () => {
let pdf = await page.pdf(PDF_SETTINGS);
expect(pdf).toMatchPDFSnapshot(1);
expect(pdf).toMatchPDFSnapshot(2);
});
}
});
<!DOCTYPE html PUBLIC>
<html lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<meta http-equiv="Content-Style-Type" content="text/css"/>
<title>
Long nested section
</title>
<script src="../../../../dist/paged.polyfill.js"></script>
<style>
@page {
size: 140mm 150mm;
margin: 0px;
padding: 0px;
}
.related {
break-inside: avoid;
}
@media screen {
body {
background-color: whitesmoke;
}
.pagedjs_page {
background-color: white;
box-shadow: 0 0 0 1px #bfbfbf;
margin-top: 10mm;
margin-left: 10mm;
}
}
</style>
</head>
<body>
<section>
<h3>Section title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed fermentum vel tortor at suscipit. Donec augue leo, viverra sit amet mauris eget, blandit vestibulum lacus. Quisque
a nibh ut ligula elementum efficitur et molestie mauris. Suspendisse potenti. Nam dapibus orci nec vestibulum volutpat. Nunc magna nibh, tristique eget ornare vel, convallis
eget quam. Donec risus neque, mattis ac finibus at, ullamcorper vitae tellus. Aenean faucibus turpis quis ligula tincidunt consectetur. Ut sed tortor urna. Vivamus volutpat
turpis vitae tortor tempor, in luctus arcu fringilla. Quisque hendrerit ligula vitae nunc porta elementum.</p>
<p>Etiam euismod interdum tellus, vitae semper nisi semper in. Curabitur tempus enim vel lectus laoreet ornare. Quisque venenatis ante in maximus scelerisque. Quisque auctor
volutpat nibh, ac finibus dui. Integer et nisi sed odio rhoncus rhoncus. Nunc auctor mi a erat pretium, sit amet placerat felis congue. Integer id mattis mauris. Etiam suscipit
pulvinar enim, sed finibus tortor. Nulla purus nisi, malesuada at orci in, fringilla aliquet mi.</p>
</section>
<section>
<div class="related">
<div class="first">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
</div>
<div class="second">
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
<p>11</p>
<p>12</p>
</div>
<div class="third">
<p>13</p>
<p>14</p>
<p>15</p>
<p>16</p>
<p>17</p>
<p>18</p>
</div>
</div>
</section>
</body>
</html>
const TIMEOUT = 10000;
describe("long nested section", () => {
let page;
beforeAll(async () => {
page = await loadPage("breaks/break-inside/break-inside-avoid/long-nested-section.html");
return page.rendered;
}, TIMEOUT);
afterAll(async () => {
if (!DEBUG) {
await page.close();
}
});
// it should ignore the rule "break-inside: avoid" because the section does not fit on the next page
it("should ignore break-inside:avoid when the element (section) does not fit on a page", async () => {
let pages = await page.$$eval(".pagedjs_page", (r) => r.length);
expect(pages).toBe(2);
});
if (!DEBUG) {
it("should create a pdf", async () => {
let pdf = await page.pdf(PDF_SETTINGS);
expect(pdf).toMatchPDFSnapshot(1);
expect(pdf).toMatchPDFSnapshot(2);
});
}
});
<!DOCTYPE html PUBLIC>
<html lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<meta http-equiv="Content-Style-Type" content="text/css"/>
<title>
Long section break before
</title>
<script src="../../../../dist/paged.polyfill.js"></script>
<style>
@page {
size: 140mm 150mm;
margin: 0px;
padding: 0px;
}
section {
break-before: page;
break-inside: avoid;
}
@media screen {
body {
background-color: whitesmoke;
}
.pagedjs_page {
background-color: white;
box-shadow: 0 0 0 1px #bfbfbf;
margin-top: 10mm;
margin-left: 10mm;
}
}
</style>
</head>
<body>
<section>
<h3>Section title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed fermentum vel tortor at suscipit. Donec augue leo, viverra sit amet mauris eget, blandit vestibulum lacus. Quisque
a nibh ut ligula elementum efficitur et molestie mauris. Suspendisse potenti. Nam dapibus orci nec vestibulum volutpat. Nunc magna nibh, tristique eget ornare vel, convallis
eget quam. Donec risus neque, mattis ac finibus at, ullamcorper vitae tellus. Aenean faucibus turpis quis ligula tincidunt consectetur. Ut sed tortor urna. Vivamus volutpat
turpis vitae tortor tempor, in luctus arcu fringilla. Quisque hendrerit ligula vitae nunc porta elementum.</p>
<p>Etiam euismod interdum tellus, vitae semper nisi semper in. Curabitur tempus enim vel lectus laoreet ornare. Quisque venenatis ante in maximus scelerisque. Quisque auctor
volutpat nibh, ac finibus dui. Integer et nisi sed odio rhoncus rhoncus. Nunc auctor mi a erat pretium, sit amet placerat felis congue. Integer id mattis mauris. Etiam suscipit
pulvinar enim, sed finibus tortor. Nulla purus nisi, malesuada at orci in, fringilla aliquet mi.</p>
</section>
<section>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
<p>11</p>
<p>12</p>
<p>13</p>
<p>14</p>
<p>15</p>
<p>16</p>
<p>17</p>
<p>18</p>
</section>
</body>
</html>
const TIMEOUT = 10000;
describe("long section break before", () => {
let page;
beforeAll(async () => {
page = await loadPage("breaks/break-inside/break-inside-avoid/long-section-break-before.html");
return page.rendered;
}, TIMEOUT);
afterAll(async () => {
if (!DEBUG) {
await page.close();
}
});
it("should ignore comply with break-before:page (precedence over break-inside:avoid)", async () => {
let pages = await page.$$eval(".pagedjs_page", (r) => r.length);
expect(pages).toBe(3);
});
if (!DEBUG) {
it("should create a pdf", async () => {
let pdf = await page.pdf(PDF_SETTINGS);
expect(pdf).toMatchPDFSnapshot(1);
expect(pdf).toMatchPDFSnapshot(2);
expect(pdf).toMatchPDFSnapshot(3);
});
}
});
<!DOCTYPE html PUBLIC>
<html lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<meta http-equiv="Content-Style-Type" content="text/css"/>
<title>
Long section
</title>
<script src="../../../../dist/paged.polyfill.js"></script>
<style>
@page {
size: 140mm 150mm;
margin: 0px;
padding: 0px;
}
section {
break-inside: avoid;
}
@media screen {
body {
background-color: whitesmoke;
}
.pagedjs_page {
background-color: white;
box-shadow: 0 0 0 1px #bfbfbf;
margin-top: 10mm;
margin-left: 10mm;
}
}
</style>
</head>
<body>
<section>
<h3>Section title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed fermentum vel tortor at suscipit. Donec augue leo, viverra sit amet mauris eget, blandit vestibulum lacus. Quisque
a nibh ut ligula elementum efficitur et molestie mauris. Suspendisse potenti. Nam dapibus orci nec vestibulum volutpat. Nunc magna nibh, tristique eget ornare vel, convallis
eget quam. Donec risus neque, mattis ac finibus at, ullamcorper vitae tellus. Aenean faucibus turpis quis ligula tincidunt consectetur. Ut sed tortor urna. Vivamus volutpat
turpis vitae tortor tempor, in luctus arcu fringilla. Quisque hendrerit ligula vitae nunc porta elementum.</p>
<p>Etiam euismod interdum tellus, vitae semper nisi semper in. Curabitur tempus enim vel lectus laoreet ornare. Quisque venenatis ante in maximus scelerisque. Quisque auctor
volutpat nibh, ac finibus dui. Integer et nisi sed odio rhoncus rhoncus. Nunc auctor mi a erat pretium, sit amet placerat felis congue. Integer id mattis mauris. Etiam suscipit
pulvinar enim, sed finibus tortor. Nulla purus nisi, malesuada at orci in, fringilla aliquet mi.</p>
</section>
<section>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
<p>11</p>
<p>12</p>
<p>13</p>
<p>14</p>
<p>15</p>
<p>16</p>
<p>17</p>
<p>18</p>
</section>
</body>
</html>
const TIMEOUT = 10000;
describe("long section", () => {
let page;
beforeAll(async () => {
page = await loadPage("breaks/break-inside/break-inside-avoid/long-section.html");
return page.rendered;
}, TIMEOUT);
afterAll(async () => {
if (!DEBUG) {
await page.close();
}
});
// it should ignore the rule "break-inside: avoid" because the section does not fit on the next page
it("should ignore break-inside:avoid when the element (section) does not fit on a page", async () => {
let pages = await page.$$eval(".pagedjs_page", (r) => r.length);
expect(pages).toBe(2);
});
if (!DEBUG) {
it("should create a pdf", async () => {
let pdf = await page.pdf(PDF_SETTINGS);
expect(pdf).toMatchPDFSnapshot(1);
expect(pdf).toMatchPDFSnapshot(2);
});
}
});
......@@ -6,16 +6,31 @@
<title>
Long table
</title>
<script src="../../../dist/paged.polyfill.js"></script>
<script src="../../../../dist/paged.polyfill.js"></script>
<style>
@page {
size: 140mm 150mm;
size: 140mm 120mm;
margin: 0px;
padding: 0px;
}
table {
break-inside: avoid;
}
@media screen {
body {
background-color: whitesmoke;
}
.pagedjs_page {
background-color: white;
box-shadow: 0 0 0 1px #bfbfbf;
margin-top: 10mm;
margin-left: 10mm;
}
}
</style>
</head>
<body>
......@@ -126,22 +141,6 @@
<td>1</td>
<td>v</td>
</tr>
<tr>
<td>1</td>
<td>w</td>
</tr>
<tr>
<td>1</td>
<td>x</td>
</tr>
<tr>
<td>1</td>
<td>y</td>
</tr>
<tr>
<td>1</td>
<td>z</td>
</tr>
</tbody>
</table>
</section>
......
......@@ -3,7 +3,7 @@ const TIMEOUT = 10000;
describe("long table", () => {
let page;
beforeAll(async () => {
page = await loadPage("splits/tables/long-table.html");
page = await loadPage("breaks/break-inside/break-inside-avoid/long-table.html");
return page.rendered;
}, TIMEOUT);
......@@ -13,11 +13,17 @@ describe("long table", () => {
}
});
// TODO: the following test will put the table on the next page but it should ignore the rule break-inside: avoid because the table does not fit on the next page
// this issue can be reproduced on v0.1.40
it.skip("should ignore break-inside:avoid when the element (table) does not fit on a page", async () => {
// it should ignore the rule "break-inside: avoid" because the table does not fit on the next page
it("should ignore break-inside:avoid when the element (table) does not fit on a page", async () => {
let pages = await page.$$eval(".pagedjs_page", (r) => r.length);
expect(pages).toBe(2);
});
}
);
if (!DEBUG) {
it("should create a pdf", async () => {
let pdf = await page.pdf(PDF_SETTINGS);
expect(pdf).toMatchPDFSnapshot(1);
expect(pdf).toMatchPDFSnapshot(2);
});
}
});
<html lang="en">
<head>
<title>multi-rowspan-table</title>
<meta charset="utf-8">
<script src="../../../../dist/paged.polyfill.js"></script>
<style type="text/css">
@page {
size: A5 landscape;
margin-top: 15mm;
margin-left: 15mm;
margin-bottom: 15mm;
margin-right: 15mm;
background-color: white;
}
table tr {
page-break-inside: avoid;
}
table td {
border-width: 1px;
border-color: black;
border-style: solid;
}
</style>
</head>
<body style="background-color: grey;">
<table>
<thead>
<tr>
<td>Left</td>
<td>
Name
</td>
<td>
Description
</td>
<td>
Category
</td>
<td>
Causes
</td>
<td>
Rating
</td>
<td>Right</td>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="14" style="background-color: darkslategrey;">Left</td>
<td rowspan="2" style="background-color: lightblue;">
Test 1
</td>
<td rowspan="2" style="background-color: lightgreen;">
Description for Test 1 that stretches over two rows.
</td>
<td style="background-color: lightpink;">
First Row for Test 1
</td>
<td rowspan="2" style="background-color: cornflowerblue;">
Rowspans that go over two rows can cause a break in page break.
</td>
<td style="background-color: turquoise;">
First rating for Test 1
</td>
<td rowspan="14" style="background-color: darkslateblue;">Right</td>
</tr>
<tr>
<td style="background-color: lightpink;">
Second Row for Test 1
</td>
<td style="background-color: turquoise;">
Second rating for Test 1
</td>
</tr>
<tr>
<td rowspan="6" style="background-color: lightblue;">
Test 2
</td>
<td rowspan="6" style="background-color: lightgreen;">
Description for Test 2 that stretches over 6 rows.
</td>
<td rowspan="4" style="background-color: lightpink;">
Four Row Rowspan for Test 2
</td>
<td rowspan="2" style="background-color: cornflowerblue;">
Rowspans that go over two rows can cause a break in page break.
</td>
<td style="background-color: turquoise;">
First rating
</td>
</tr>
<tr>
<td style="background-color: turquoise;">
Second rating
</td>
</tr>
<tr>
<td rowspan="2" style="background-color: cornflowerblue;">
Rowspans that go over two rows can cause a break in page break.
</td>
<td style="background-color: turquoise;">
Third rating
</td>
</tr>
<tr>
<td style="background-color: turquoise;">
Fourth rating
</td>
</tr>
<tr>
<td rowspan="2" style="background-color: lightpink;">
Two Row Rowspan for Test 2
</td>
<td rowspan="2" style="background-color: cornflowerblue;">
Rowspans that go over two rows can cause a break in page break.
</td>
<td style="background-color: turquoise;">
Fifth rating
</td>
</tr>
<tr>
<td style="background-color: turquoise;">
Sixth rating
</td>
</tr>
<tr>
<td rowspan="6" style="background-color: lightblue;">
Test 3
</td>
<td rowspan="6" style="background-color: lightgreen;">
Description for Test 3 that stretches over 6 rows.
</td>
<td rowspan="4" style="background-color: lightpink;">
Four Row Rowspan for Test 3
</td>
<td rowspan="2" style="background-color: cornflowerblue;">
Rowspans that go over two rows can cause a break in page break.
</td>
<td style="background-color: turquoise;">
First rating for Test 3
</td>
</tr>
<tr>
<td style="background-color: turquoise;">
Second rating for Test 3
</td>
</tr>
<tr>
<td rowspan="2" style="background-color: cornflowerblue;">
Rowspans that go over two rows can cause a break in page break.
</td>
<td style="background-color: turquoise;">
Third rating
</td>
</tr>
<tr>
<td style="background-color: turquoise;">
Fourth rating
</td>
</tr>
<tr>
<td rowspan="2" style="background-color: lightpink;">
Two Row Rowspan for Test 3
</td>
<td rowspan="2" style="background-color: cornflowerblue;">
Rowspans that go over two rows can cause a break in page break.
</td>
<td style="background-color: turquoise;">
Fifth rating
</td>
</tr>
<tr>
<td style="background-color: turquoise;">
Sixth rating
</td>
</tr>
</tbody>
</table>
<script>
class RepeatingTableHeaders extends Paged.Handler {
constructor(chunker, polisher, caller) {
super(chunker, polisher, caller);
}
afterPageLayout(pageElement, page, breakToken, chunker) {
// Find all split table elements
let tables = pageElement.querySelectorAll("table[data-split-from]");
tables.forEach((table) => {
// Get the reference UUID of the node
let ref = table.dataset.ref;
// Find the node in the original source
let sourceTable = chunker.source.querySelector("[data-ref='" + ref + "']");
// Find if there is a header
let header = sourceTable.querySelector("thead");
if (header) {
// Clone the header element
let clonedHeader = header.cloneNode(true);
// Insert the header at the start of the split table
table.insertBefore(clonedHeader, table.firstChild);
}
});
}
}
Paged.registerHandlers(RepeatingTableHeaders);
</script>
</body>
</html>
<!DOCTYPE html PUBLIC>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>rowspan-table</title>
<script src="../../../../dist/paged.polyfill.js"></script>
<style>
@page {
size: 600px 300px;
border: 1px solid #cfc2c2;
}
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
tr, td {
break-inside: avoid;
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td rowspan="4">1.1</td>
<td rowspan="4">This is a long description</td>
<td>First row, third column</td>
<td rowspan="4">1.4</td>
<td>First row, fifth column</td>
<td rowspan="4">1.6</td>
</tr>
<tr>
<td>Second row, third column</td>
<td>Second row, fifth column</td>
</tr>
<tr>
<td>Third row, third column</td>
<td>Third row, fifth column</td>
</tr>
<tr>
<td>Fourth row, third column</td>
<td>Fourth row, fifth column</td>
</tr>
</tbody>
</table>
</body>
</html>
const TIMEOUT = 10000;
describe("rowspan table", () => {
let page;
beforeAll(async () => {
page = await loadPage("breaks/break-inside/break-inside-avoid/rowspan-table.html");
return page.rendered;
}, TIMEOUT);
afterAll(async () => {
if (!DEBUG) {
await page.close();
}
});
if (!DEBUG) {
it("should create a pdf", async () => {
let pdf = await page.pdf(PDF_SETTINGS);
expect(pdf).toMatchPDFSnapshot(1);
expect(pdf).toMatchPDFSnapshot(2);
});
}
});
<!DOCTYPE html PUBLIC>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>uneven-rowspan-table</title>
<script src="../../../../dist/paged.polyfill.js"></script>
<style>
@page {
size: 1800px 625px;
border: 1px solid #cfc2c2;
}
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
tr, td {
break-inside: avoid;
}
td > * {
break-inside: avoid;
}
</style>
</head>
<body>
<table class="tableblock frame-all grid-all stretch small standard-table">
<colgroup>
<col style="width: 6.8965%;"/>
<col style="width: 10.3448%;"/>
<col style="width: 6.8965%;"/>
<col style="width: 6.8965%;"/>
<col style="width: 6.8965%;"/>
<col style="width: 6.8965%;"/>
<col style="width: 6.8965%;"/>
<col style="width: 6.8965%;"/>
<col style="width: 6.8965%;"/>
<col style="width: 6.8965%;"/>
<col style="width: 6.8965%;"/>
<col style="width: 6.8965%;"/>
<col style="width: 6.8965%;"/>
<col style="width: 6.8972%;"/>
</colgroup>
<thead>
<tr>
<th class="tableblock halign-center valign-middle" colspan="5">aараbеcрu wоiсcруwjmm</th>
<th class="tableblock halign-center valign-middle" rowspan="3">zаcа mсaucаimg</th>
<th class="tableblock halign-center valign-middle" colspan="6">mсaucаimе bеcоzоb оcрudа со сwаpudаimеb</th>
<th class="tableblock halign-center valign-middle" rowspan="3">yаwcmqесwmf wpасс sеcоiа wоiсcруwjmm, схеbа Г</th>
<th class="tableblock halign-center valign-middle" rowspan="3">Сооcdеcсcdуеc/iе сооcdеcсcdуеc aроеwcу</th>
</tr>
<tr>
<th class="tableblock halign-center valign-middle" rowspan="2">iоbер wоicроpmруеbого уqасcwа</th>
<th class="tableblock halign-center valign-middle" rowspan="2">iаmbеiоdаimе wоiсcруwjmm</th>
<th class="tableblock halign-center valign-middle" rowspan="2">zаcа sеcоimроdаimg</th>
<th class="tableblock halign-center valign-middle" rowspan="2">dоoрасc, суc.</th>
<th class="tableblock halign-center valign-middle" rowspan="2">aроеwciuf wpасс</th>
<th class="tableblock halign-center valign-middle" colspan="6">aоwаoаimg aрmsора</th>
</tr>
<tr>
<th class="tableblock halign-center valign-middle">Усmpmе aрm duрudе аiwера (1)</th>
<th class="tableblock halign-center valign-middle">m1</th>
<th class="tableblock halign-center valign-middle">m2</th>
<th class="tableblock halign-center valign-middle">m3</th>
<th class="tableblock halign-center valign-middle">yаwcmqесwаg aроqiосcp iа уqасcwе, ba</th>
<th class="tableblock halign-center valign-middle">yаwcmqесwаg aроqiосcp wоiсcруwjmm, baа</th>
</tr>
</thead>
<tbody>
<tr>
<td class="tableblock halign-center valign-middle"><p class="tableblock">1</p></td>
<td class="tableblock halign-center valign-middle" rowspan="3"><p class="tableblock">сcеiа/wоpоiiа/ampоi/apmcа aереwрucmg/yуizаbеic ozаimg/сооруrеimg № <em> , d осgх </em> / __ iа оcbеcwе оc zо</p></td>
<td class="tableblock halign-center valign-middle" rowspan="3"><p class="tableblock">01.01.2020</p></td>
<td class="tableblock halign-center valign-middle" rowspan="3"><p class="tableblock">32</p></td>
<td class="tableblock halign-center valign-middle" rowspan="3"><p class="tableblock">d__</p></td>
<td class="tableblock halign-center valign-middle" rowspan="3"><p class="tableblock">02.02.2020</p></td>
<td class="tableblock halign-center valign-middle"><p class="tableblock">33,2</p></td>
<td class="tableblock halign-center valign-middle" rowspan="3"><p class="tableblock">1</p></td>
<td class="tableblock halign-center valign-middle" rowspan="3"><p class="tableblock">1</p></td>
<td class="tableblock halign-center valign-middle" rowspan="3"><p class="tableblock">1</p></td>
<td class="tableblock halign-center valign-middle"><p class="tableblock">33</p></td>
<td class="tableblock halign-center valign-middle" rowspan="3"><p class="tableblock">37.67</p></td>
<td class="tableblock halign-center valign-middle" rowspan="3"><p class="tableblock">37.67</p></td>
<td class="tableblock halign-center valign-middle" rowspan="8"><p class="tableblock">Сооcdеcсcdуеc/iе сооcdеcсcdуеc</p></td>
</tr>
<tr>
<td class="tableblock halign-center valign-middle"><p class="tableblock">2</p></td>
<td class="tableblock halign-center valign-middle"><p class="tableblock">40,1</p></td>
<td class="tableblock halign-center valign-middle"><p class="tableblock">40</p></td>
</tr>
<tr>
<td class="tableblock halign-center valign-middle"><p class="tableblock">3</p></td>
<td class="tableblock halign-center valign-middle"><p class="tableblock">40,1</p></td>
<td class="tableblock halign-center valign-middle"><p class="tableblock">40</p></td>
</tr>
<tr>
<td class="tableblock halign-center valign-middle"><p class="tableblock">4</p></td>
<td class="tableblock halign-center valign-middle" rowspan="3"><p class="tableblock">сcеiа/wоpоiiа/ampоi/apmcа aереwрucmg/yуizаbеic ozаimg/сооруrеimg № <em> , d осgх </em> / __ iа оcbеcwе оc zо</p></td>
<td class="tableblock halign-center valign-middle" rowspan="3"><p class="tableblock">01.01.2020</p></td>
<td class="tableblock halign-center valign-middle" rowspan="3"><p class="tableblock">32</p></td>
<td class="tableblock halign-center valign-middle" rowspan="3"><p class="tableblock">d__</p></td>
<td class="tableblock halign-center valign-middle" rowspan="3"><p class="tableblock">02.02.2020</p></td>
<td class="tableblock halign-center valign-middle"><p class="tableblock">43,7</p></td>
<td class="tableblock halign-center valign-middle" rowspan="3"><p class="tableblock">1</p></td>
<td class="tableblock halign-center valign-middle" rowspan="3"><p class="tableblock">1</p></td>
<td class="tableblock halign-center valign-middle" rowspan="3"><p class="tableblock">1</p></td>
<td class="tableblock halign-center valign-middle"><p class="tableblock">43</p></td>
<td class="tableblock halign-center valign-middle" rowspan="3"><p class="tableblock">42.33</p></td>
<td class="tableblock halign-center valign-middle" rowspan="3"><p class="tableblock">42.33</p></td>
</tr>
<tr>
<td class="tableblock halign-center valign-middle"><p class="tableblock">5</p></td>
<td class="tableblock halign-center valign-middle"><p class="tableblock">42,7</p></td>
<td class="tableblock halign-center valign-middle"><p class="tableblock">42</p></td>
</tr>
<tr>
<td class="tableblock halign-center valign-middle"><p class="tableblock">6</p></td>
<td class="tableblock halign-center valign-middle"><p class="tableblock">42,7</p></td>
<td class="tableblock halign-center valign-middle"><p class="tableblock">42</p></td>
</tr>
<tr>
<td class="tableblock halign-center valign-middle"><p class="tableblock">7</p></td>
<td class="tableblock halign-center valign-middle" rowspan="2"><p class="tableblock">сcеiа/wоpоiiа/ampоi/apmcа aереwрucmg/yуizаbеic ozаimg/сооруrеimg № <em> , d осgх </em> / __ iа оcbеcwе оc zо</p></td>
<td class="tableblock halign-center valign-middle" rowspan="2"><p class="tableblock">01.01.2020</p></td>
<td class="tableblock halign-center valign-middle" rowspan="2"><p class="tableblock">32</p></td>
<td class="tableblock halign-center valign-middle" rowspan="2"><p class="tableblock">d__</p></td>
<td class="tableblock halign-center valign-middle" rowspan="2"><p class="tableblock">02.02.2020</p></td>
<td class="tableblock halign-center valign-middle"><p class="tableblock">44,2</p></td>
<td class="tableblock halign-center valign-middle" rowspan="2"><p class="tableblock">1</p></td>
<td class="tableblock halign-center valign-middle" rowspan="2"><p class="tableblock">1</p></td>
<td class="tableblock halign-center valign-middle" rowspan="2"><p class="tableblock">1</p></td>
<td class="tableblock halign-center valign-middle"><p class="tableblock">44</p></td>
<td class="tableblock halign-center valign-middle" rowspan="2"><p class="tableblock">43</p></td>
<td class="tableblock halign-center valign-middle" rowspan="2"><p class="tableblock">43</p></td>
</tr>
<tr>
<td class="tableblock halign-center valign-middle"><p class="tableblock">8</p></td>
<td class="tableblock halign-center valign-middle"><p class="tableblock">42,5</p></td>
<td class="tableblock halign-center valign-middle"><p class="tableblock">42</p></td>
</tr>
<tr>
<td class="tableblock halign-center valign-middle"><p class="tableblock">9</p></td>
<td class="tableblock halign-center valign-middle" rowspan="3"><p class="tableblock">сcеiа/wоpоiiа/ampоi/apmcа aереwрucmg/yуizаbеic ozаimg/сооруrеimg № <em> , d осgх </em> hello</p></td>
<td class="tableblock halign-center valign-middle" rowspan="3"><p class="tableblock">01.01.2020</p></td>
<td class="tableblock halign-center valign-middle" rowspan="3"><p class="tableblock">32</p></td>
<td class="tableblock halign-center valign-middle" rowspan="3"><p class="tableblock">d__</p></td>
<td class="tableblock halign-center valign-middle" rowspan="3"><p class="tableblock">02.02.2020</p></td>
<td class="tableblock halign-center valign-middle"><p class="tableblock">33,2</p></td>
<td class="tableblock halign-center valign-middle" rowspan="3"><p class="tableblock">1</p></td>
<td class="tableblock halign-center valign-middle" rowspan="3"><p class="tableblock">1</p></td>
<td class="tableblock halign-center valign-middle" rowspan="3"><p class="tableblock">1</p></td>
<td class="tableblock halign-center valign-middle"><p class="tableblock">33</p></td>
<td class="tableblock halign-center valign-middle" rowspan="3"><p class="tableblock">37.67</p></td>
<td class="tableblock halign-center valign-middle" rowspan="3"><p class="tableblock">37.67</p></td>
<td class="tableblock halign-center valign-middle" rowspan="8"><p class="tableblock">Сооcdеcсcdуеc/iе сооcdеcсcdуеc</p></td>
</tr>
<tr>
<td class="tableblock halign-center valign-middle"><p class="tableblock">10</p></td>
<td class="tableblock halign-center valign-middle"><p class="tableblock">40,1</p></td>
<td class="tableblock halign-center valign-middle"><p class="tableblock">40</p></td>
</tr>
<tr>
<td class="tableblock halign-center valign-middle"><p class="tableblock">11</p></td>
<td class="tableblock halign-center valign-middle"><p class="tableblock">40,1</p></td>
<td class="tableblock halign-center valign-middle"><p class="tableblock">40</p></td>
</tr>
<tr>
<td class="tableblock halign-center valign-middle"><p class="tableblock">12</p></td>
<td class="tableblock halign-center valign-middle" rowspan="3"><p class="tableblock">сcеiа/wоpоiiа/ampоi/apmcа aереwрucmg/yуizаbеic ozаimg/сооруrеimg № <em> , d осgх </em> hello</p></td>
<td class="tableblock halign-center valign-middle" rowspan="3"><p class="tableblock">01.01.2020</p></td>
<td class="tableblock halign-center valign-middle" rowspan="3"><p class="tableblock">32</p></td>
<td class="tableblock halign-center valign-middle" rowspan="3"><p class="tableblock">d__</p></td>
<td class="tableblock halign-center valign-middle" rowspan="3"><p class="tableblock">02.02.2020</p></td>
<td class="tableblock halign-center valign-middle"><p class="tableblock">43,7</p></td>
<td class="tableblock halign-center valign-middle" rowspan="3"><p class="tableblock">1</p></td>
<td class="tableblock halign-center valign-middle" rowspan="3"><p class="tableblock">1</p></td>
<td class="tableblock halign-center valign-middle" rowspan="3"><p class="tableblock">1</p></td>
<td class="tableblock halign-center valign-middle"><p class="tableblock">43</p></td>
<td class="tableblock halign-center valign-middle" rowspan="3"><p class="tableblock">42.33</p></td>
<td class="tableblock halign-center valign-middle" rowspan="3"><p class="tableblock">42.33</p></td>
</tr>
<tr>
<td class="tableblock halign-center valign-middle"><p class="tableblock">13</p></td>
<td class="tableblock halign-center valign-middle"><p class="tableblock">42,7</p></td>
<td class="tableblock halign-center valign-middle"><p class="tableblock">42</p></td>
</tr>
<tr>
<td class="tableblock halign-center valign-middle"><p class="tableblock">14</p></td>
<td class="tableblock halign-center valign-middle"><p class="tableblock">42,7</p></td>
<td class="tableblock halign-center valign-middle"><p class="tableblock">42</p></td>
</tr>
<tr>
<td class="tableblock halign-center valign-middle"><p class="tableblock">15</p></td>
<td class="tableblock halign-center valign-middle" rowspan="2"><p class="tableblock">сcеiа/wоpоiiа/ampоi/apmcа aереwрucmg/yуizаbеic ozаimg/сооруrеimg № <em> , d осgх </em> / __ iа оcbеcwе оc zо</p></td>
<td class="tableblock halign-center valign-middle" rowspan="2"><p class="tableblock">01.01.2020</p></td>
<td class="tableblock halign-center valign-middle" rowspan="2"><p class="tableblock">32</p></td>
<td class="tableblock halign-center valign-middle" rowspan="2"><p class="tableblock">d__</p></td>
<td class="tableblock halign-center valign-middle" rowspan="2"><p class="tableblock">02.02.2020</p></td>
<td class="tableblock halign-center valign-middle"><p class="tableblock">44,2</p></td>
<td class="tableblock halign-center valign-middle" rowspan="2"><p class="tableblock">1</p></td>
<td class="tableblock halign-center valign-middle" rowspan="2"><p class="tableblock">1</p></td>
<td class="tableblock halign-center valign-middle" rowspan="2"><p class="tableblock">1</p></td>
<td class="tableblock halign-center valign-middle"><p class="tableblock">44</p></td>
<td class="tableblock halign-center valign-middle" rowspan="2"><p class="tableblock">43</p></td>
<td class="tableblock halign-center valign-middle" rowspan="2"><p class="tableblock">43</p></td>
</tr>
<tr>
<td class="tableblock halign-center valign-middle"><p class="tableblock">16</p></td>
<td class="tableblock halign-center valign-middle"><p class="tableblock">42,5</p></td>
<td class="tableblock halign-center valign-middle"><p class="tableblock">42</p></td>
</tr>
</tbody>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>table-avoid-break-row</title>
<meta charset="UTF-8">
<script src="../../../dist/paged.polyfill.js"></script>
<style>
@page {
size: A5;
margin: 1cm;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
tr {
break-inside: avoid;
}
.table td, .table th {
border: 1px solid #dbdbdb;
padding: .5em .75em;
vertical-align: top;
}
/* interface */
@media screen {
body {
background-color: whitesmoke;
}
.pagedjs_page {
margin-bottom: 20px;
flex: none;
box-shadow: 0 0 0 1px rgba(0, 0,0,0.2);
background-color: white;
}
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<main>
<section>
<table class="table is-bordered">
<thead>
<tr>
<th>id</th>
<th>first_name</th>
<th>last_name</th>
<th colspan="2">email + score</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Magdalen</td>
<td>Holtaway</td>
<td>Flowdesk</td>
<td rowspan="3">37.67</td>
</tr>
<tr>
<td>2</td>
<td>Olenka</td>
<td>Tuckett</td>
<td>Subin</td>
</tr>
<tr>
<td>3</td>
<td>Towny</td>
<td>Calverley</td>
<td>Fintone</td>
</tr>
<tr>
<td>4</td>
<td>Maribeth</td>
<td>Caskie</td>
<td>Tresom</td>
<td rowspan="3">13.64</td>
</tr>
<tr>
<td>5</td>
<td>Roldan</td>
<td>Whitham</td>
<td>Flowdesk</td>
</tr>
<tr>
<td>6</td>
<td>Melody</td>
<td>Gentle</td>
<td>Asoka</td>
</tr>
<tr>
<td>7</td>
<td>Aida</td>
<td>Holtum</td>
<td>Bigtax</td>
<td rowspan="3">84.10</td>
</tr>
<tr>
<td>8</td>
<td>Angelia</td>
<td>O'Farrell</td>
<td>Bamity</td>
</tr>
<tr>
<td>9</td>
<td>Puff</td>
<td>Stennet</td>
<td>Aerified</td>
</tr>
<tr>
<td>10</td>
<td>Carmel</td>
<td>Ennion</td>
<td>Kanlam</td>
<td rowspan="3">59.44</td>
</tr>
<tr>
<td>11</td>
<td>Phyllida</td>
<td>Sarra</td>
<td>Toughjoyfax</td>
</tr>
<tr>
<td>12</td>
<td>Dulcy</td>
<td>Lamb-shine</td>
<td>Tresom</td>
</tr>
<tr>
<td>13</td>
<td>Piggy</td>
<td>Junifer</td>
<td>Bitchip</td>
<td rowspan="3">23.64</td>
</tr>
<tr>
<td>14</td>
<td>Adrianna</td>
<td>Millichap</td>
<td>It</td>
</tr>
<tr>
<td>15</td>
<td>Celeste</td>
<td>Milleton</td>
<td>Daltfresh</td>
</tr>
<tr>
<td>16</td>
<td>Ted</td>
<td>Slyde</td>
<td>Treeflex</td>
<td rowspan="3">74.64</td>
</tr>
<tr>
<td>17</td>
<td>Maurene</td>
<td>Sylvester</td>
<td>Tres-Zap</td>
</tr>
<tr>
<td>18</td>
<td>Monte</td>
<td>Tingley</td>
<td>Redhold</td>
</tr>
<tr>
<td>19</td>
<td>Louise</td>
<td>McMichell</td>
<td>Latlux</td>
<td rowspan="3">18.86</td>
</tr>
<tr>
<td>20</td>
<td>Turner</td>
<td>McQuirter</td>
<td>Keylex</td>
</tr>
<tr>
<td>21</td>
<td>Alvin</td>
<td>Emilien</td>
<td>Cardguard</td>
</tr>
<tr>
<td>22</td>
<td>Joanne</td>
<td>Obey</td>
<td>Regrant</td>
<td rowspan="3">25.32</td>
</tr>
<tr>
<td>23</td>
<td>Lorne</td>
<td>Lescop</td>
<td>Home Ing</td>