Hey guys i'm using Dompdf in laravel and i only have a h2 and a table on my dompdf view from which the pdf is generated so when i generate the pdf the both h2 and table elements kind of merges here is the actual problem.
Here is my code ->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Student Records</title>
</head>
<body>
<style>
.pdfContainer {
width: 100%;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
}
table {
width: 70%;
text-align: center;
margin-right: auto;
margin-left: auto;
float: bottom;
border: none;
}
td {
text-align: center;
font-size: 0.95em;
color: #252a34;
font-weight: 500;
background-color: #fff;
white-space: nowrap;
}
th,
td {
padding: 15px;
border: 1px solid #252a34 !important;
border-collapse: collapse;
border-spacing: 0;
}
th {
text-align: center;
font-size: 0.95em;
font-weight: 800;
border: none;
white-space: nowrap;
}
.attdStatusTdpresent {
color: #18a14f;
padding: 8px;
width: 110px;
border-radius: 40px;
margin: auto;
text-transform: capitalize;
font-weight: 600;
font-size: 0.95em;
font-family: "Merriweather Sans", sans-serif;
}
.attdStatusTdabsent {
color: #b82348;
padding: 8px;
width: 110px;
border-radius: 40px;
margin: auto;
text-transform: capitalize;
font-weight: 600;
font-size: 0.95em;
font-family: "Merriweather Sans", sans-serif;
}
.attdStatusTdlate {
color: #ff2e63;
padding: 8px;
width: 110px;
border-radius: 40px;
margin: auto;
text-transform: capitalize;
font-size: 0.95em;
}
.attBehaviourExcellent {
color: #289672;
padding: 8px;
width: 110px;
border-radius: 40px;
margin: auto;
text-transform: capitalize;
font-size: 0.95em;
}
.attBehaviourGood {
color: #00bfa6;
padding: 8px;
width: 110px;
border-radius: 40px;
margin: auto;
text-transform: capitalize;
font-size: 0.95em;
}
.attBehaviourAverage {
color: #ffc947;
padding: 8px;
width: 110px;
border-radius: 40px;
margin: auto;
text-transform: capitalize;
font-size: 0.95em;
}
.attBehaviourBad {
color: #ff2e63;
padding: 8px;
width: 110px;
border-radius: 40px;
margin: auto;
text-transform: capitalize;
font-size: 0.95em;
}
.attProgressExcellent {
color: #289672;
padding: 8px;
width: 110px;
border-radius: 40px;
margin: auto;
text-transform: capitalize;
font-size: 0.95em;
}
.attProgressGood {
color: #00bfa6;
padding: 8px;
width: 110px;
border-radius: 40px;
margin: auto;
text-transform: capitalize;
font-size: 0.95em;
}
.attProgressNeed {
color: #ffc947;
padding: 8px;
width: 140px;
border-radius: 40px;
margin: auto;
text-transform: capitalize;
font-size: 0.95em;
white-space: nowrap;
}
.attProgressprogressive {
color: #185adb;
padding: 8px;
width: 110px;
border-radius: 40px;
margin: auto;
text-transform: capitalize;
font-size: 0.95em;
}
.pdfContainer {
width: 100%;
min-height: 100vh;
display: flex;
align-items: flex-start;
box-sizing: border-box;
}
</style>
<div class="pdfContainer">
<table>
<h2 style='margin:auto;'>{{$studentName}}</h2>
<tr>
<th> PRÉSENCE </th>
<th> COMPORTEMENT </th>
<th> PROGRES </th>
<th> DATE DE L’ATELIER </th>
</tr>
@foreach($records as $record)
<tr>
<td>
<p class="attdStatusTd{{$record['att_status']}}"> {{$record['att_status']}} </p>
</td>
<td>
<p class="attBehaviour{{$record['behaviour']}}"> {{$record['behaviour']}} </p>
</td>
<td>
<p class="attProgress{{$record['progress']}}"> {{$record['progress']}} </p>
</td>
<td>
<p> {{$record['customDate']}} </p>
</td>
</tr>
@endforeach
</table>
</div>
</body>
</html>
My Answer:
html
PDF
Title
Header 1
Header 2
Data 1
Data 2
Make sure you are using proper CSS styles to separate the h2 and table elements in the PDF. You can try adding some margin or padding to the h2 element to create some space between the h2 and table elements. Additionally, you can also try adding a page break before the table element to ensure proper arrangement in the PDF.
© 2024 Hayatsk.info - Personal Blogs Platform. All Rights Reserved.
Create blog | Privacy Policy | Terms & Conditions | Contact Us
Create blog | Privacy Policy | Terms & Conditions | Contact Us
Rate this post
4 of 5 based on 5057 votesComments