php - Dompdf laravel 文本重叠
问题描述
这是问题->问题
我试图把那段文字放在桌子下面,但它在桌子上重叠。我不能把它弄到底部。我认为这是因为在条件下它正在制作<tr>
并且因为文本部分在循环完成之前被渲染。
这是我的代码->
<!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: 100%;
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%;
display: flex;
align-items: flex-start;
box-sizing: border-box;
}
.logo>img {
width: 100%;
min-height: 30px;
}
.nameContainer {
width: 100%;
text-align: center;
}
</style>
<div class="logo">
<img src="<?php echo Illuminate\Support\Facades\URL::to('/') . '/' ?>images/l.jpg" alt="">
</div>
<div class="nameContainer">
<h2> {{$studentName}} </h2>
</div>
<div class="pdfContainer">
<table>
<tr>
<th> PRÉSENCE </th>
<th> COMPORTEMENT </th>
<th> PROGRES </th>
<th> DATE DE L’ATELIER </th>
</tr>
@foreach($records as $record)
<tr>
<td>
data
</td>
<td>
data
</td>
<td>
data
</td>
<td>
<p> {{$record['customDate']}} </p>
</td>
</tr>
@endforeach
</table>
</div>
<div class="termContainer">
<strong> Term Report: </strong>
<p>{{ !empty($termReport->text) ? $termReport->text: '' }} </p>
</div>
<div class="footerImage">
<img src="<?php echo Illuminate\Support\Facades\URL::to('/') . '/' ?>images/fol.jpg" alt="">
</div>
</body>
</html>
有什么解决办法吗?
解决方案
推荐阅读
- python - 表单无法分配给函数调用
- facebook - 我可以直接从我的服务器上的 FB.login 使用访问令牌吗?
- javascript - 仅返回我的 JSON 对象的某些值
- flutter - 如何在颤动中创建一个微小的边缘分隔器
- go - 我可以在 Xeon Phi(Knight's Landing)处理器上编译 Go 程序吗?
- reactjs - 即使使用键集也能对唯一键警告做出反应
- python - 创建 AWS V4 签名 URL 以从 ScaleWay 对象存储中下载文件
- c# - 在 Asp.Net 中为 Doubles 输入“数字”?
- javascript - 在 javascript 中调用 javascript 适用于某些但并非所有脚本
- continuous-integration - 如何在 GitHub Actions 中的运行之间缓存已安装的工具?