Dompdf，表格无法正确显示较长的内容
我想问一下如何正确渲染表格，我试图渲染表格，但是如果内容很长，它将像下面一样变形，它将与页面的边缘重叠。
和以下是HTML源代码，其中包含一堆表和一个表单元格内的子表，可以很好地呈现给浏览器，但是当我尝试使用Dompdf以pdf格式下载时，该表将无法正确呈现
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Documentation Proceedings</title>
<style>
@font-face {
font-family: 'Arial';
font-style: normal;
font-weight: normal;
}
@font-face {
font-family: 'Arial';
font-style: normal;
font-weight: bold;
}
body {
font-family: 'Arial';
font-size: 11px;
}
.header {
font-size: 15px;
}
.table,
.table td,
.table th {
border: 1px solid #2b2b2b;
text-align: left;
}
.table {
border-collapse: collapse;
width: 100%;
}
.table th,
.table td {
padding: 5px;
}
.policy-content .items {
padding-left: 10px;
}
ol {
padding: 0px 0px 0px 12px;
counter-reset: item;
text-align: justify;
}
li {
display: block
}
li:before {
content: counters(item, ".") " ";
counter-increment: item
}
/* width */
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
/* Track */
::-webkit-scrollbar-track {
background: #bdbdbd;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: rgb(95, 95, 95);
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #464d52;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
#watermark {
position: fixed;
bottom: 0px;
color: #d12f2fc4;
font-size: 13px;
/** Your watermark should be behind every content**/
z-index: -1000;
}
/*Imported from the source of document_content.css*/
table.ordered-list tr td.ol-label,
table.ordered-list tr td.ol-content {
vertical-align: top;
text-align: left;
border: 0px;
}
</style>
</head>
<body>
<table class="table">
<tbody>
<tr>
<th>
<center>
<img style="width:110px;" src="http://cdn.sportscity.com.ph/images/sci_logo_2.png"><br>
<span class="header">
PHILIPPINES
</span>
</center>
</th>
<th>
<center>
<span class="header">
Human and Resource
</span>
</center>
</th>
<th colspan="4">
<center>
<span class="header">
Policy
</span>
</center>
</th>
</tr>
<tr>
<th>Document Title</th>
<td>Documentation Proceedings</td>
<th colspan="3">Document No.</th>
<td>HRAT-PO-001</td>
</tr>
<tr>
<th>Effectivity Date</th>
<td>
<span>
January 01, 2019
</span>
</td>
<th colspan="3">Revision Number</th>
<td>002</td>
</tr>
<tr>
<th>Prepared By</th>
<td>
Kevin Loquencio
</td>
<th colspan="3">Revision Date</th>
<td>April 29, 2019</td>
</tr>
<tr>
<th>
<span>Reviewed By</span>
</th>
<td colspan="5">
</td>
</tr>
<tr>
<th>
<span>Approver<small>(s)</small></span>
</th>
<td colspan="5">
</td>
</tr>
</tbody>
</table>
<h3>REVISION LOGS</h3>
<table class="table">
<thead>
<tr>
<th>Revision Level</th>
<th>Effectivity Date</th>
<th>Description of Change</th>
<th>Change Initiator</th>
<th>Reviewer(s)</th>
<th>Approver(s)</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>
<span>
January 01, 2019
</span>
</td>
<td>
<table class="ordered-list">
<tbody>
<tr>
<td class="ol-label" style="padding-bottom: 1em;"><strong>1.</strong></td>
<td class="ol-content" style="padding-bottom: 1em;"><strong>OBJECTS:</strong>
<table class="ordered-list">
<tbody>
<tr>
<td class="ol-label"><strong>1.1.</strong></td>
<td class="ol-content">Lorem Ipsum is simply dummy text of the printing
and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer
took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into
electronic typesetting, remaining essentially unchanged. It was
popularised in the 1960s with the release of Letraset sheets
containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem
Ipsum.</td>
</tr>
<tr>
<td class="ol-label"><strong>1.2.</strong></td>
<td class="ol-content">Lorem Ipsum is simply dummy text of the printing
and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer
took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into
electronic typesetting, remaining essentially unchanged. It was
popularised in the 1960s with the release of Letraset sheets
containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem
Ipsum.</td>
</tr>
<tr>
<td class="ol-label"><strong>1.3.</strong></td>
<td class="ol-content">Lorem Ipsum is simply dummy text of the printing
and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer
took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into
electronic typesetting, remaining essentially unchanged. It was
popularised in the 1960s with the release of Letraset sheets
containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem
Ipsum.</td>
</tr>
<tr>
<td class="ol-label"><strong>1.4.</strong></td>
<td class="ol-content">Lorem Ipsum is simply dummy text of the printing
and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer
took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into
electronic typesetting, remaining essentially unchanged. It was
popularised in the 1960s with the release of Letraset sheets
containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem
Ipsum.</td>
</tr>
<tr>
<td class="ol-label"><strong>1.5.</strong></td>
<td class="ol-content">Lorem Ipsum is simply dummy text of the printing
and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer
took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into
electronic typesetting, remaining essentially unchanged. It was
popularised in the 1960s with the release of Letraset sheets
containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem
Ipsum.</td>
</tr>
<tr>
<td class="ol-label"><strong>1.6.</strong></td>
<td class="ol-content">Lorem Ipsum is simply dummy text of the printing
and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer
took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into
electronic typesetting, remaining essentially unchanged. It was
popularised in the 1960s with the release of Letraset sheets
containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem
Ipsum.</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="ol-label" style="padding-bottom: 1em;"><strong>2.</strong></td>
<td class="ol-content" style="padding-bottom: 1em;"><strong>SCOPE:</strong><br>Lorem
Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
been the industry's standard dummy text ever since the 1500s, when an unknown
printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s with the release of
Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.</td>
</tr>
<tr>
<td class="ol-label" style="padding-bottom: 1em;"><strong>3.</strong></td>
<td class="ol-content" style="padding-bottom: 1em;"><strong>TABLE HEADS:</strong>
<table class="ordered-list">
<tbody>
<tr>
<td class="ol-label"><strong>3.1.</strong></td>
<td class="ol-content">
<table class="table table-bordered">
<thead>
<tr>
<th>asd</th>
<th>asdas</th>
<th>asdas</th>
</tr>
</thead>
<tbody>
<tr>
<td>asda</td>
<td>asd</td>
<td>d</td>
</tr>
<tr>
<td>sd</td>
<td>asdsa</td>
<td>d</td>
</tr>
<tr>
<td>Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and
scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap
into electronic typesetting, remaining essentially
unchanged. It was popularised in the 1960s with the
release of Letraset sheets containing Lorem Ipsum
passages, and more recently with desktop publishing
software like Aldus PageMaker including versions of
Lorem Ipsum.</td>
<td>dasd</td>
<td>asdas</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<td>Kevin Loquencio</td>
<td>
Test Reviewer<br>
</td>
<td>
Test Approver<br>
</td>
</tr>
<tr>
<td>002</td>
<td>
<span>
January 01, 2019
</span>
</td>
<td>
<table class="ordered-list">
<tbody>
<tr>
<td class="ol-label" style="padding-bottom: 1em;"><strong></strong></td>
<td class="ol-content" style="padding-bottom: 1em;"><strong>test:</strong><br>Lorem
Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
been the industry's standard dummy text ever since the 1500s, when an unknown
printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s with the release of
Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.</td>
</tr>
</tbody>
</table>
</td>
<td>Kevin Loquencio</td>
<td>
</td>
<td>
</td>
</tr>
</tbody>
</table>
<br>
<table class="ordered-list">
<tbody>
<tr>
<td class="ol-label" style="padding-bottom: 1em;"><strong>1.</strong></td>
<td class="ol-content" style="padding-bottom: 1em;"><strong>SCOPE:</strong><br>Lorem Ipsum is simply
dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard
dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to
make a type specimen book. It has survived not only five centuries, but also the leap into
electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the
release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.</td>
</tr>
</tbody>
</table>
</body>
</html>
# instantiate and use the dompdf class
$dompdf = new \Dompdf\Dompdf();
$dompdf->loadHtml($template);
$options = new \Dompdf\Options();
$options->setIsRemoteEnabled(true);
$options->set('isHtml5ParserEnabled', true);
$dompdf->setOptions($options);
# (Optional) Setup the paper size and orientation
$dompdf->setPaper('letter', 'portrait');
# Render the HTML as PDF
$dompdf->render();
# Output the generated PDF to Browser
$dompdf->stream($filename, array("Attachment" => true));
0 个答案:
没有答案
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？