I have a large web page that when printed will often require multiple page breaks. However, this means that the content is split from the rest of the parent layout structure and user might not understand which question it realates to. Something like the examples below
Current Behaviour
A 1 i What is the capital of Peru?
ii What is the capital of Brazil?
iii What is the capital of Equador?
2 i What is the population of France?
ii What is the population of Spain?
___________________________________________
iii What is the population of Italy?
What I would like to do is repeat the questions numbers at the beinning of the page so that the orphaned question has the reference of the parent.
Desired behaviour
A 1 i What is the capital of Peru?
ii What is the capital of Brazil?
iii What is the capital of Equador?
2 i What is the population of France?
ii What is the population of Spain?
___________________________________________
A 2 iii What is the population of Italy?
Is there any way do this with CSS? I don't see how using the CSS 'page-break' properties would work. Otherwise maybe Javascript? I'll be using wkhtmltopdf to convert the html to pdf by the way.
Added some example code.
td, th {
vertical-align: top;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" typZe="text/css" href="css/main.css">
</head>
<body>
<table style="height: 202px; width: 557px;">
<thead>
<tr>
<th>Main</th>
<th>Sub</th>
<th>Subsub</th>
<th>Question</th>
<th>Marks</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="6">1</td>
<td rowspan="3">a</td>
<td>i</td>
<td>Here is a question 1</td>
<td>1.0</td>
</tr>
<tr>
<td>ii</td>
<td>Here is a question 2</td>
<td>1.0</td>
</tr>
<tr>
<td>iii</td>
<td>
<p>Here is a question 3</p>
</td>
<td>1.0</td>
</tr>
<tr>
<td rowspan="2">b</td>
<td>i</td>
<td>Here is a question 4</td>
<td>1.0</td>
</tr>
<tr>
<td>ii</td>
<td>Here is a question 5</td>
<td>1.0</td>
</tr>
<tr>
<td>c</td>
<td> </td>
<td>Here is a question 6</td>
<td>1.0</td>
</tr>
<tr>
<td rowspan="3">2</td>
<td>a</td>
<td> </td>
<td>Here is a question 7</td>
<td>1.0</td>
</tr>
<tr>
<td rowspan="2">b</td>
<td>i</td>
<td>Here is a question 8</td>
<td>1.0</td>
</tr>
<tr>
<td>ii</td>
<td>Here is a question 9</td>
<td>
<p>1.0</p>
</td>
</tr>
<tr>
<td rowspan="6">3</td>
<td rowspan="3">a</td>
<td>i</td>
<td>Here is a question 10</td>
<td>1.0</td>
</tr>
<tr>
<td>ii</td>
<td>Here is a question 11</td>
<td>1.0</td>
</tr>
<tr>
<td>iii</td>
<td>Here is a question 12
</td>
<td>1.0</td>
</tr>
<tr>
<td rowspan="2">b</td>
<td>i</td>
<td>Here is a question 13</td>
<td>1.0</td>
</tr>
<tr>
<td>ii</td>
<td>Here is a question 14</td>
<td>1.0</td>
</tr>
<tr>
<td>c</td>
<td> </td>
<td>Here is a question 15</td>
<td>1.0</td>
</tr>
<tr>
<td rowspan="6">4</td>
<td rowspan="3">a</td>
<td>i</td>
<td>Here is a question 16</td>
<td>1.0</td>
</tr>
<tr>
<td>ii</td>
<td>Here is a question 17</td>
<td>1.0</td>
</tr>
<tr>
<td>iii</td>
<td>
<p>Here is a question 18</p>
</td>
<td>1.0</td>
</tr>
<tr>
<td rowspan="2">b</td>
<td>i</td>
<td>Here is a question 19</td>
<td>1.0</td>
</tr>
<tr>
<td>ii</td>
<td>Here is a question 20</td>
<td>1.0</td>
</tr>
<tr>
<td>c</td>
<td> </td>
<td>Here is a question 21</td>
<td>1.0</td>
</tr>
<tr>
<td rowspan="6">5</td>
<td rowspan="3">a</td>
<td>i</td>
<td>Here is a question 22</td>
<td>1.0</td>
</tr>
<tr>
<td>ii</td>
<td>Here is a question 23</td>
<td>1.0</td>
</tr>
<tr>
<td>iii</td>
<td>
<p>Here is a question 24</p>
</td>
<td>1.0</td>
</tr>
<tr>
<td rowspan="2">b</td>
<td>i</td>
<td>Here is a question 25</td>
<td>1.0</td>
</tr>
<tr>
<td>ii</td>
<td>Here is a question 26</td>
<td>1.0</td>
</tr>
<tr>
<td>c</td>
<td> </td>
<td>Here is a question 27</td>
<td>1.0</td>
</tr>
<tr>
<td rowspan="3">6</td>
<td>a</td>
<td> </td>
<td>Here is a question 28</td>
<td>1.0</td>
</tr>
<tr>
<td rowspan="2">b</td>
<td>i</td>
<td>Here is a question 29</td>
<td>1.0</td>
</tr>
<tr>
<td>ii</td>
<td>Here is a question 30</td>
<td>
<p>1.0</p>
</td>
</tr>
<tr>
<td rowspan="6">7</td>
<td rowspan="3">a</td>
<td>i</td>
<td>Here is a question 31</td>
<td>1.0</td>
</tr>
<tr>
<td>ii</td>
<td>Here is a question 32</td>
<td>1.0</td>
</tr>
<tr>
<td>iii</td>
<td>Here is a question 33</td>
<td>1.0</td>
</tr>
<tr>
<td rowspan="2">b</td>
<td>i</td>
<td>Here is a question 34</td>
<td>1.0</td>
</tr>
<tr>
<td>ii</td>
<td>Here is a question 35</td>
<td>1.0</td>
</tr>
<tr>
<td>c</td>
<td> </td>
<td>Here is a question 36</td>
<td>1.0</td>
</tr>
<tr>
<td rowspan="6">8</td>
<td rowspan="3">a</td>
<td>i</td>
<td>Here is a question 37</td>
<td>1.0</td>
</tr>
<tr>
<td>ii</td>
<td>Here is a question 38</td>
<td>1.0</td>
</tr>
<tr>
<td>iii</td>
<td>
<p>Here is a question 39</p>
</td>
<td>1.0</td>
</tr>
<tr>
<td rowspan="2">b</td>
<td>i</td>
<td>Here is a question 40</td>
<td>1.0</td>
</tr>
<tr>
<td>ii</td>
<td>Here is a question 41</td>
<td>1.0</td>
</tr>
<tr>
<td>c</td>
<td> </td>
<td>Here is a question 42</td>
<td>1.0</td>
</tr>
</tbody>
</table>
</body>
</html>The below code uses the responsive grid system and the CSS page-break-inside property.
Basically, we'll set the value of the page-break-inside property to avoid, which means that display the complete item on the same page and don't break it on page break. That means the whole item will be displayed on the same page.
In your case, we'll enclose the whole main group into one div and assign the page-break-inside property. And to get a tabular structure we'll use the CSS grid system, rows, and cols.
Now, this code does not copy the main q.no, sub q.no on a page break. But it keeps all questions of the same main q.no on the same page.
This code can also be implemented by for loops for dynamically filling the page.
Note the print CSS class. It is assigned to the row where we are creating a new main question. If this serves your purpose, I can help you design the for loop, if it seems complex...
.row {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12,
.col,
.col-auto {
position: relative;
width: 100%;
}
.col {
-ms-flex-preferred-size: 0;
flex-basis: 0;
-ms-flex-positive: 1;
flex-grow: 1;
max-width: 100%;
}
.col-auto {
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: auto;
max-width: 100%;
}
.col-1 {
-ms-flex: 0 0 8.333333%;
flex: 0 0 8.333333%;
max-width: 8.333333%;
}
.col-2 {
-ms-flex: 0 0 16.666667%;
flex: 0 0 16.666667%;
max-width: 16.666667%;
}
.col-3 {
-ms-flex: 0 0 25%;
flex: 0 0 25%;
max-width: 25%;
}
.col-4 {
-ms-flex: 0 0 33.333333%;
flex: 0 0 33.333333%;
max-width: 33.333333%;
}
.col-5 {
-ms-flex: 0 0 41.666667%;
flex: 0 0 41.666667%;
max-width: 41.666667%;
}
.col-6 {
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%;
}
.col-7 {
-ms-flex: 0 0 58.333333%;
flex: 0 0 58.333333%;
max-width: 58.333333%;
}
.col-8 {
-ms-flex: 0 0 66.666667%;
flex: 0 0 66.666667%;
max-width: 66.666667%;
}
.col-9 {
-ms-flex: 0 0 75%;
flex: 0 0 75%;
max-width: 75%;
}
.col-10 {
-ms-flex: 0 0 83.333333%;
flex: 0 0 83.333333%;
max-width: 83.333333%;
}
.col-11 {
-ms-flex: 0 0 91.666667%;
flex: 0 0 91.666667%;
max-width: 91.666667%;
}
.col-12 {
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
}
@media print {
.print {
page-break-inside: avoid;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="row print">
<div class="col-1"> 1 </div>
<div class="col-11">
<div class="row">
<div class="col-1"> a </div>
<div class="col-11">
<div class="row">
<div class="col-1">i</div>
<div class="col-10">Here is question 1</div>
<div class="col-1">1.0</div>
</div>
<div class="row">
<div class="col-1">ii</div>
<div class="col-10">Here is question 2</div>
<div class="col-1"> 1.0 </div>
</div>
<div class="row">
<div class="col-1">iii</div>
<div class="col-10">Here is question 3</div>
<div class="col-1"> 1.0 </div>
</div>
</div>
</div>
<div class="row">
<div class="col-1"> b </div>
<div class="col-11">
<div class="row">
<div class="col-1">i</div>
<div class="col-10">Here is question 1</div>
<div class="col-1">1.0</div>
</div>
<div class="row">
<div class="col-1">ii</div>
<div class="col-10">Here is question 2</div>
<div class="col-1"> 1.0 </div>
</div>
<div class="row">
<div class="col-1">iii</div>
<div class="col-10">Here is question 3</div>
<div class="col-1"> 1.0 </div>
</div>
</div>
</div>
<div class="row">
<div class="col-1"> c </div>
<div class="col-11">
<div class="row">
<div class="col-1">i</div>
<div class="col-10">Here is question 1</div>
<div class="col-1">1.0</div>
</div>
<div class="row">
<div class="col-1">ii</div>
<div class="col-10">Here is question 2</div>
<div class="col-1"> 1.0 </div>
</div>
<div class="row">
<div class="col-1">iii</div>
<div class="col-10">Here is question 3</div>
<div class="col-1"> 1.0 </div>
</div>
</div>
</div>
</div>
</div>
<div class="row print">
<div class="col-1"> 2 </div>
<div class="col-11">
<div class="row">
<div class="col-1"> a </div>
<div class="col-11">
<div class="row">
<div class="col-1">i</div>
<div class="col-10">Here is question 1</div>
<div class="col-1">1.0</div>
</div>
<div class="row">
<div class="col-1">ii</div>
<div class="col-10">Here is question 2</div>
<div class="col-1"> 1.0 </div>
</div>
<div class="row">
<div class="col-1">iii</div>
<div class="col-10">Here is question 3</div>
<div class="col-1"> 1.0 </div>
</div>
</div>
</div>
<div class="row">
<div class="col-1"> b </div>
<div class="col-11">
<div class="row">
<div class="col-1">i</div>
<div class="col-10">Here is question 1</div>
<div class="col-1">1.0</div>
</div>
<div class="row">
<div class="col-1">ii</div>
<div class="col-10">Here is question 2</div>
<div class="col-1"> 1.0 </div>
</div>
<div class="row">
<div class="col-1">iii</div>
<div class="col-10">Here is question 3</div>
<div class="col-1"> 1.0 </div>
</div>
</div>
</div>
<div class="row">
<div class="col-1"> c </div>
<div class="col-11">
<div class="row">
<div class="col-1">i</div>
<div class="col-10">Here is question 1</div>
<div class="col-1">1.0</div>
</div>
<div class="row">
<div class="col-1">ii</div>
<div class="col-10">Here is question 2</div>
<div class="col-1"> 1.0 </div>
</div>
<div class="row">
<div class="col-1">iii</div>
<div class="col-10">Here is question 3</div>
<div class="col-1"> 1.0 </div>
</div>
</div>
</div>
</div>
</div>
<div class="row print">
<div class="col-1"> 3 </div>
<div class="col-11">
<div class="row">
<div class="col-1"> a </div>
<div class="col-11">
<div class="row">
<div class="col-1">i</div>
<div class="col-10">Here is question 1</div>
<div class="col-1">1.0</div>
</div>
<div class="row">
<div class="col-1">ii</div>
<div class="col-10">Here is question 2</div>
<div class="col-1"> 1.0 </div>
</div>
<div class="row">
<div class="col-1">iii</div>
<div class="col-10">Here is question 3</div>
<div class="col-1"> 1.0 </div>
</div>
</div>
</div>
<div class="row">
<div class="col-1"> b </div>
<div class="col-11">
<div class="row">
<div class="col-1">i</div>
<div class="col-10">Here is question 1</div>
<div class="col-1">1.0</div>
</div>
<div class="row">
<div class="col-1">ii</div>
<div class="col-10">Here is question 2</div>
<div class="col-1"> 1.0 </div>
</div>
<div class="row">
<div class="col-1">iii</div>
<div class="col-10">Here is question 3</div>
<div class="col-1"> 1.0 </div>
</div>
</div>
</div>
<div class="row">
<div class="col-1"> c </div>
<div class="col-11">
<div class="row">
<div class="col-1">i</div>
<div class="col-10">Here is question 1</div>
<div class="col-1">1.0</div>
</div>
<div class="row">
<div class="col-1">ii</div>
<div class="col-10">Here is question 2</div>
<div class="col-1"> 1.0 </div>
</div>
<div class="row">
<div class="col-1">iii</div>
<div class="col-10">Here is question 3</div>
<div class="col-1"> 1.0 </div>
</div>
</div>
</div>
</div>
</div>
<div class="row print">
<div class="col-1"> 4 </div>
<div class="col-11">
<div class="row">
<div class="col-1"> a </div>
<div class="col-11">
<div class="row">
<div class="col-1">i</div>
<div class="col-10">Here is question 1</div>
<div class="col-1">1.0</div>
</div>
<div class="row">
<div class="col-1">ii</div>
<div class="col-10">Here is question 2</div>
<div class="col-1"> 1.0 </div>
</div>
<div class="row">
<div class="col-1">iii</div>
<div class="col-10">Here is question 3</div>
<div class="col-1"> 1.0 </div>
</div>
</div>
</div>
<div class="row">
<div class="col-1"> b </div>
<div class="col-11">
<div class="row">
<div class="col-1">i</div>
<div class="col-10">Here is question 1</div>
<div class="col-1">1.0</div>
</div>
<div class="row">
<div class="col-1">ii</div>
<div class="col-10">Here is question 2</div>
<div class="col-1"> 1.0 </div>
</div>
<div class="row">
<div class="col-1">iii</div>
<div class="col-10">Here is question 3</div>
<div class="col-1"> 1.0 </div>
</div>
</div>
</div>
<div class="row">
<div class="col-1"> c </div>
<div class="col-11">
<div class="row">
<div class="col-1">i</div>
<div class="col-10">Here is question 1</div>
<div class="col-1">1.0</div>
</div>
<div class="row">
<div class="col-1">ii</div>
<div class="col-10">Here is question 2</div>
<div class="col-1"> 1.0 </div>
</div>
<div class="row">
<div class="col-1">iii</div>
<div class="col-10">Here is question 3</div>
<div class="col-1"> 1.0 </div>
</div>
</div>
</div>
</div>
</div>
<div class="row print">
<div class="col-1"> 5 </div>
<div class="col-11">
<div class="row">
<div class="col-1"> a </div>
<div class="col-11">
<div class="row">
<div class="col-1">i</div>
<div class="col-10">Here is question 1</div>
<div class="col-1">1.0</div>
</div>
<div class="row">
<div class="col-1">ii</div>
<div class="col-10">Here is question 2</div>
<div class="col-1"> 1.0 </div>
</div>
<div class="row">
<div class="col-1">iii</div>
<div class="col-10">Here is question 3</div>
<div class="col-1"> 1.0 </div>
</div>
</div>
</div>
<div class="row">
<div class="col-1"> b </div>
<div class="col-11">
<div class="row">
<div class="col-1">i</div>
<div class="col-10">Here is question 1</div>
<div class="col-1">1.0</div>
</div>
<div class="row">
<div class="col-1">ii</div>
<div class="col-10">Here is question 2</div>
<div class="col-1"> 1.0 </div>
</div>
<div class="row">
<div class="col-1">iii</div>
<div class="col-10">Here is question 3</div>
<div class="col-1"> 1.0 </div>
</div>
</div>
</div>
<div class="row">
<div class="col-1"> c </div>
<div class="col-11">
<div class="row">
<div class="col-1">i</div>
<div class="col-10">Here is question 1</div>
<div class="col-1">1.0</div>
</div>
<div class="row">
<div class="col-1">ii</div>
<div class="col-10">Here is question 2</div>
<div class="col-1"> 1.0 </div>
</div>
<div class="row">
<div class="col-1">iii</div>
<div class="col-10">Here is question 3</div>
<div class="col-1"> 1.0 </div>
</div>
</div>
</div>
</div>
</div>
<div class="row print">
<div class="col-1"> 6 </div>
<div class="col-11">
<div class="row">
<div class="col-1"> a </div>
<div class="col-11">
<div class="row">
<div class="col-1">i</div>
<div class="col-10">Here is question 1</div>
<div class="col-1">1.0</div>
</div>
<div class="row">
<div class="col-1">ii</div>
<div class="col-10">Here is question 2</div>
<div class="col-1"> 1.0 </div>
</div>
<div class="row">
<div class="col-1">iii</div>
<div class="col-10">Here is question 3</div>
<div class="col-1"> 1.0 </div>
</div>
</div>
</div>
<div class="row">
<div class="col-1"> b </div>
<div class="col-11">
<div class="row">
<div class="col-1">i</div>
<div class="col-10">Here is question 1</div>
<div class="col-1">1.0</div>
</div>
<div class="row">
<div class="col-1">ii</div>
<div class="col-10">Here is question 2</div>
<div class="col-1"> 1.0 </div>
</div>
<div class="row">
<div class="col-1">iii</div>
<div class="col-10">Here is question 3</div>
<div class="col-1"> 1.0 </div>
</div>
</div>
</div>
<div class="row">
<div class="col-1"> c </div>
<div class="col-11">
<div class="row">
<div class="col-1">i</div>
<div class="col-10">Here is question 1</div>
<div class="col-1">1.0</div>
</div>
<div class="row">
<div class="col-1">ii</div>
<div class="col-10">Here is question 2</div>
<div class="col-1"> 1.0 </div>
</div>
<div class="row">
<div class="col-1">iii</div>
<div class="col-10">Here is question 3</div>
<div class="col-1"> 1.0 </div>
</div>
</div>
</div>
</div>
</div>
<div class="row print">
<div class="col-1"> 7 </div>
<div class="col-11">
<div class="row">
<div class="col-1"> a </div>
<div class="col-11">
<div class="row">
<div class="col-1">i</div>
<div class="col-10">Here is question 1</div>
<div class="col-1">1.0</div>
</div>
<div class="row">
<div class="col-1">ii</div>
<div class="col-10">Here is question 2</div>
<div class="col-1"> 1.0 </div>
</div>
<div class="row">
<div class="col-1">iii</div>
<div class="col-10">Here is question 3</div>
<div class="col-1"> 1.0 </div>
</div>
</div>
</div>
<div class="row">
<div class="col-1"> b </div>
<div class="col-11">
<div class="row">
<div class="col-1">i</div>
<div class="col-10">Here is question 1</div>
<div class="col-1">1.0</div>
</div>
<div class="row">
<div class="col-1">ii</div>
<div class="col-10">Here is question 2</div>
<div class="col-1"> 1.0 </div>
</div>
<div class="row">
<div class="col-1">iii</div>
<div class="col-10">Here is question 3</div>
<div class="col-1"> 1.0 </div>
</div>
</div>
</div>
<div class="row">
<div class="col-1"> c </div>
<div class="col-11">
<div class="row">
<div class="col-1">i</div>
<div class="col-10">Here is question 1</div>
<div class="col-1">1.0</div>
</div>
<div class="row">
<div class="col-1">ii</div>
<div class="col-10">Here is question 2</div>
<div class="col-1"> 1.0 </div>
</div>
<div class="row">
<div class="col-1">iii</div>
<div class="col-10">Here is question 3</div>
<div class="col-1"> 1.0 </div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>