My webpage is quite long and often requires multiple page breaks when printed. However, this causes the content to be separated from the parent layout structure, making it difficult for users to understand which question it corresponds to. This issue is illustrated below:
Current Scenario
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?
To address this problem, I would like to repeat the question numbers at the beginning of each page so that even if a question is on a separate page, it still has a clear reference.
Desired Outcome
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 a way to achieve this using CSS? The 'page-break' properties don't seem suitable for this situation. Alternatively, could Javascript be used? Note that I will be converting the HTML to PDF using wkhtmltopdf.
An example code snippet has been included as follows:
td, th {
vertical-align: top;
}<!DOCTYPE html>
<html lang="en>
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="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>
... (code continues)
</tbody>
</table>
</body>
</html>