0
Ниже мои скриншоты HTML и PDF 
DOMPDF не генерирует PDF правильно
мой HTML содержит дивы и стили, как ниже
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Challan Form</title>
<style>
\t body{
\t \t background: #f2f2f2;
\t \t font-family:"Trebuchet MS", Arial, Helvetica, sans-serifl;
\t \t font-size:14px;
\t }
\t *{
\t \t margin:0;
\t \t padding:0;
\t \t box-sizing:border-box;
\t }
\t .form-challan {
width: 96%;
margin: 0px auto;
background: #ccc;
\t padding:20px 0;
\t min-height: 500px;
}
ul{
\t list-style: none;
}
a{
\t text-decoration:none;
}
.form-challan ul.main{
\t display:flex;
\t justify-content: space-between;
}
.form-challan ul.main li#triplicate,
.form-challan ul.main li#duplicate,
.form-challan ul.main li#original {
width: 32.33%;
background: #fff;
min-height: 400px;
\t border: 2px solid;
\t padding:5px 0;
}
.form-challan ul li:after{
\t border-right: 1px dotted #000;
}
.rows {
width: 100%;
float: left;
}
.rows-tri{
\t width:96%;
}
.f-right{
\t float:right;
}
.f-left{
\t float:left;
}
.t-right{
\t text-align: right;
}
.t-left{
\t text-align:left;
}
.t-center{
\t text-align:center;
}
.gov-telangana{
\t font-weight:bold;
\t font-size:16px;
\t margin:0 0 5px 0;
}
input[type="text"] {
padding: 2px;
float: left;
width: 10%;
text-align: center;
border: 1px solid #000;
}
.rows-tri.f-right ul{
\t display:block;
}
.rows-tri.f-right ul li{
\t width:auto;
\t border:none;
\t min-height:inherit;
\t padding:0;
}
.e-cls{
float: left;
margin: 0 0 0 5px;
}
.cha-tre-num {
width: 98%;
float: right;
\t padding: 5px 0;
}
.cha-tre-num .challan-no {
width: 56%;
margin-left: 10px;
}
.hr-full{
\t width:100%;
\t border-bottom:2px solid #333;
\t float:left;
}
.major-head {
padding: 3px 0;
}
.pa3{
\t padding:3px 0;
}
.wid-mar{
\t width:98%;
\t margin:0px auto;
display: table;
}
.major-head.wid-mar ul li input {
width: 25%;
}
</style>
</head>
<body>
<div class="form-challan">
\t <ul class="main">
\t <li id="triplicate">
\t <div class="rows">
<div class="rows-tri f-left t-right">
<span class="e-cls">E</span>
<span class="tri-title">TRIPLICATE</span>
</div>
\t \t \t </div>
<div class="rows t-center">
<p class="gov-telangana">GOVERNMENT OF TELANGANA</p>
</div>
<div class="rows">
\t <div class="rows-tri f-right">
\t \t \t \t \t <ul class="f-left">
\t \t \t \t \t \t <li style="width:20%; float:left;"><span>DTO/STO</span></li>
<li style="width:25%; float:left;"><span>HYD</span></li>
<li style="width:54%; float:left;">
<span class="f-left">Treaury/PAO Code</span>
<input type="text" placeholder="2" />
<input type="text" placeholder="5" />
<input type="text" placeholder="0" />
<input type="text" placeholder="2" />
\t \t \t \t \t \t </li>
</ul>
</div>
</div>
<div class="rows">
\t <div class="cha-tre-num">
\t <span class="f-left">Treasury Challan No.</span>
<input type="text" class="challan-no f-left"/>
</div>
</div>
<div class="hr-full"></div>
<div class="rows">
\t <div class="major-head wid-mar">
\t <ul class="f-left">
\t \t \t \t \t \t <li style="width:30%; float:left;"><span>Major Head</span></li>
<li style="width:25%; float:left;">
<input type="text" placeholder="2" />
<input type="text" placeholder="5" />
<input type="text" placeholder="0" />
<input type="text" placeholder="2" />
\t \t \t \t \t \t </li>
<li style="width:35%; float:right;"><span>Other Deposits</span></li>
</ul>
</div>
</div>
<div class="hr-full"></div>
<div class="rows">
\t <div class="sub-major-head wid-mar pa3">
\t <ul class="f-left">
\t \t \t \t \t \t <li style="width:30%; float:left;"><span>Sub - Major Head</span></li>
<li style="width:25%; float:left;">
<input type="text" placeholder="2" style="width:25%;" />
<input type="text" placeholder="5" style="width:25%;" />
\t \t \t \t \t \t </li>
</ul>
</div>
</div>
<div class="hr-full"></div>
<div class="rows">
\t <div class="minor-head wid-mar pa3">
\t <ul class="f-left">
\t \t \t \t \t \t <li style="width:30%; float:left; margin-top: 5px;"><span>Minor Head</span></li>
<li style="width:25%; float:left; margin-top: 5px;">
<input type="text" placeholder="2" style="width:25%;" />
<input type="text" placeholder="5" style="width:25%;" />
<input type="text" placeholder="5" style="width:25%;" />
\t \t \t \t \t \t </li>
<li style="width:40%; float:left; font-size:12px;"><span>Defined Contributory Pension Scheme For Govt. Employess</span></li>
</ul>
</div>
</div>
<div class="hr-full"></div>
<div class="rows">
\t <div class="group-sub-head wid-mar pa3">
\t <ul class="f-left">
\t \t \t \t \t \t <li style="width:30%; float:left;"><span>Group Sub - Head</span></li>
<li style="width:25%; float:left;">
<input type="text" placeholder="2" style="width:25%;" />
<input type="text" placeholder="5" style="width:25%;" />
\t \t \t \t \t \t </li>
</ul>
</div>
</div>
<div class="hr-full"></div>
<div class="rows">
\t <div class="sub1-head wid-mar pa3">
\t <ul class="f-left">
\t \t \t \t \t \t <li style="width:30%; float:left; margin-top: 5px;"><span>Sub - Head</span></li>
<li style="width:25%; float:left; margin-top: 5px;">
<input type="text" placeholder="2" style="width:25%;" />
<input type="text" placeholder="5" style="width:25%;" />
\t \t \t \t \t \t </li>
<li style="width:40%; float:left; font-size:12px;"><span>AP State Govt EMployees Contributory Pension Scheme</span></li>
</ul>
</div>
</div>
<div class="rows">
\t <div class="detailed1-head wid-mar pa3">
\t <ul class="f-left">
\t \t \t \t \t \t <li style="width:30%; float:left;"><span>Detailed - Head</span></li>
<li style="width:25%; float:left;">
<input type="text" placeholder="2" style="width:25%;" />
<input type="text" placeholder="5" style="width:25%;" />
<input type="text" placeholder="5" style="width:25%;" />
\t \t \t \t \t \t </li>
<li style="width:40%; float:left; font-size:12px;"><span>Employee Contribution</span></li>
</ul>
</div>
</div>
<div class="hr-full"></div>
<div class="rows">
\t <div class="sub-detailed wid-mar pa3">
\t <ul class="f-left">
\t \t \t \t \t \t <li style="width:30%; float:left;"><span>Sub - Detailed</span></li>
<li style="width:25%; float:left;">
<input type="text" placeholder="0" style="width:25%;" />
<input type="text" placeholder="0" style="width:25%;" />
<input type="text" placeholder="0" style="width:25%;" />
\t \t \t \t \t \t </li>
<li style="width:40%; float:left; font-size: 14px; text-align: center;"><span>---</span></li>
</ul>
</div>
</div>
<div class="hr-full"></div>
<div class="rows">
\t <div class="sub-detailed wid-mar pa3">
\t <ul class="f-left" style="font-size:12px;">
\t \t \t \t \t \t <li style="width:20%; float:left;"><span>Non-Plan =N Plan=P</span></li>
<li style="width:22%; float:left; margin-right: 10px;">
<input type="text" placeholder="N" style="width:25%;" />
Charged = C Voted =V
\t \t \t \t \t \t </li>
<li style="width:22%; float:left;">
<input type="text" placeholder="V" style="width:25%;" />
Charged = C Voted =V
\t \t \t \t \t \t </li>
<li style="width:25%; float:left;">
<input type="text" placeholder="2" style="width:25%;" />
<input type="text" placeholder="0" style="width:25%;" />
<input type="text" placeholder="7" style="width:25%;" />
<input type="text" placeholder="1" style="width:25%;" />
\t \t \t \t \t \t </li>
</ul>
</div>
</div>
<div class="hr-full"></div>
<div class="rows">
\t <div class="amount-box">
\t <div class="wid-mar pa3">
\t
</div>
</div>
</div>
</li>
<li id="duplicate"></li>
<li id="original"></li>
</ul>
</div>
<a class="hideforpdf" href="converted2.php?action=download" target="_blank">View PDF</a>
</body>
</html>PHP кода
<?php
require_once 'dompdf/autoload.inc.php';
// reference the Dompdf namespace
use Dompdf\Dompdf;
if (isset($_GET['action']) && $_GET['action'] == 'download') {
// instantiate and use the dompdf class
$dompdf = new Dompdf();
//to put other html file
$html = file_get_contents('challan-form.html');
//hide download pdf link in generated output pdf
$html .= '<style type="text/css">.hideforpdf { display: none; }</style>';
//load html
$dompdf->loadHtml($html);
// (Optional) Setup the paper size and orientation
$dompdf->setPaper('Legal', 'Landscape');
// Render the HTML as PDF
$dompdf->render();
// Output the generated PDF (1 = download and 0 = preview)
$dompdf->stream("sample",array("Attachment"=>1));
}
?>
В html будет три коробки. Какая ошибка? Поддерживает ли dompdf все стили? есть код css, отображающий отображение: flex, pdf генерирует пустой, если он есть. Если я удалю эту строку, прилагается pdf. Пожалуйста, помогите