Level 8
Seems like this is really difficult, I can't receive any inputs even from StackOverflow.
Nov 4, 2022
1
Level 8
table rowspan page break problem
I've seen a lot of topics about this problem but I haven't really find the solution on how to solve it, because this one is quite different. I've also tried a lot of solution from SO but still can't solve the issue.
How do you prevent the excess content of table td that uses rowspan in PDF? I attached the image below.
As you can see in the image above I can successfully break the table, but the problem is the content of it that uses rowspan, it's overflowing/excess the border of the last table row.
My current implementation:
I'm using wkhtmltopdf and laravel-snappy to generate the PDF, how this works? this is just loading a blade / html file and generates PDF from it base on the design/css of the file.
My blade file/HTML with CSS - the image above is generated based to the below code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>`
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="{{ public_path('css/bootstrap.css') }}" rel="stylesheet">
<head>
<style>
table {
table-layout: fixed;
word-wrap: break-word;
}
.table td, .table th {
min-width: 100px;
}
.table > tbody > tr > td {
vertical-align: text-top;
}
table {
border-spacing: 0;
}
thead {
display: table-row-group;
}
tr {
page-break-before: always!important;
page-break-after: auto!important;
page-break-inside: avoid!important;
}
td {
padding: 0;
}
</style>
</head>
<body>
<table class="table table-bordered">
<thead>
<th width="150">Time</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
</thead>
<tbody>
<tr>
<td> 07:00AM - 07:05AM </td>
<td></td>
<td></td>
<td rowspan="12" class="text-center" style="background-color:#ea4335"> S3 - Subject #3 <br> Jane X Doe <br> Room R3 - Room-3 <br> Grade 9 - Tarantulas </td>
<td></td>
<td rowspan="24" class="text-center" style="background-color:#c042f4"> S-1 - Subject #1 <br> Jane X Doe <br> Room R1 - Room-1 <br> Grade 12 - Canny </td>
</tr>
<tr>
<td> 07:05AM - 07:10AM </td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td> 07:10AM - 07:15AM </td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td> 07:15AM - 07:20AM </td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td> 07:20AM - 07:25AM </td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td> 07:25AM - 07:30AM </td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td> 07:30AM - 07:35AM </td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td> 07:35AM - 07:40AM </td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td> 07:40AM - 07:45AM </td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td> 07:45AM - 07:50AM </td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td> 07:50AM - 07:55AM </td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td> 07:55AM - 08:00AM </td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td> 08:00AM - 08:05AM </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td> 08:05AM - 08:10AM </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td> 08:10AM - 08:15AM </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td> 08:15AM - 08:20AM </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td> 08:20AM - 08:25AM </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td> 08:25AM - 08:30AM </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td> 08:30AM - 08:35AM </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td> 08:35AM - 08:40AM </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td> 08:40AM - 08:45AM </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td> 08:45AM - 08:50AM </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td> 08:50AM - 08:55AM </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td> 08:55AM - 09:00AM </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td> 09:30AM - 09:35AM </td>
<td rowspan="12" class="text-center" style="background-color:#4285f4"> S6 - Subject #6 <br> Jane X Doe <br> Room R6 - Room-6 <br> Grade 8 - Tyrants </td>
<td></td>
<td></td>
<td></td>
<td rowspan="12" class="text-center" style="background-color:#34a853"> S2 - Subject #2 <br> Jane X Doe <br> Room R2 - Room-2 <br> Grade 9 - Clever </td>
</tr>
<tr>
<td> 09:35AM - 09:40AM </td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td> 09:40AM - 09:45AM </td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td> 09:45AM - 09:50AM </td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td> 09:50AM - 09:55AM </td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td> 09:55AM - 10:00AM </td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td> 10:00AM - 10:05AM </td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td> 10:05AM - 10:10AM </td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td> 10:10AM - 10:15AM </td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td> 10:15AM - 10:20AM </td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td> 10:20AM - 10:25AM </td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td> 10:25AM - 10:30AM </td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td> 10:30AM - 10:35AM </td>
<td></td>
<td rowspan="12" class="text-center" style="background-color:#fbbc04"> S5 - Subject #5 <br> Jane X Doe <br> Room R5 - Room-5 <br> Grade 11 - Brightest </td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td> 10:35AM - 10:40AM </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td> 10:40AM - 10:45AM </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td> 10:45AM - 10:50AM </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td> 10:50AM - 10:55AM </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td> 10:55AM - 11:00AM </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td> 11:00AM - 11:05AM </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td> 11:05AM - 11:10AM </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td> 11:10AM - 11:15AM </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td> 11:15AM - 11:20AM </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td> 11:20AM - 11:25AM </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td> 11:25AM - 11:30AM </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td> 03:00PM - 03:05PM </td>
<td></td>
<td></td>
<td></td>
<td rowspan="12" class="text-center" style="background-color:#42f451"> S4 - Subject #4 <br> Jane X Doe <br> Room R2 - Room-2 <br> Grade 7 - Leopards </td>
<td></td>
</tr>
<tr>
<td> 03:05PM - 03:10PM </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td> 03:10PM - 03:15PM </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td> 03:15PM - 03:20PM </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td> 03:20PM - 03:25PM </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td> 03:25PM - 03:30PM </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td> 03:30PM - 03:35PM </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td> 03:35PM - 03:40PM </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td> 03:40PM - 03:45PM </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td> 03:45PM - 03:50PM </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td> 03:50PM - 03:55PM </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td> 03:55PM - 04:00PM </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>
The problem is the rowspan is not breaking as the last tr td does.
I've tried a lot from my research in SO and this below code is the best that I can get, others are having a problem displaying the contents of the table when breaking.
thead {
display: table-row-group;
}
tr {
page-break-before: always!important;
page-break-after: auto!important;
page-break-inside: avoid!important;
}
Please or to participate in this conversation.