dompdf render doesn't look like html - php

Question

i use dompdf with codeigniter to convert my php (html) file into pdf.
My problem is the dompdf render doesn't appear like my php page :
Style for php file :
body {font-family:Arial, Helvetica, sans-serif;
font-size:15px;
color:#000;}
.xls {
border-top:1px solid #868686; }
.xls tr > td {
border-right:1px solid #868686; padding: 2px 3px 2px 5px;}
.t-pad tr > td {
border-right:1px solid #868686; padding: 2px 3px 2px 5px;}
.xls tr:first-child >td {
border-top:1px solid #868686;border-bottom:1px solid #000;}
.xls tr:last-child >td {
border-bottom:1px solid #868686;
text-align: center;
}
.xls {
border-right:1px solid #868686;
border-left:1px solid #868686;
}
.xls .m-td{
border-bottom: 0 none !important;
border-left: 1px solid #868686;
border-right: 1px solid #868686;
border-top: 0 none !important;}
.last-col{border-right:0 !important;
border-top: 0 none !important; }
.td-tab{ padding:10px 10px 10px 20px !important;}
.tab-center{ border-left: 1px solid #868686; }
.tab-center td{ padding: 0 0 0 5px; border-bottom: 1px solid #868686; }
.first-td {
border-top: 1px solid #868686 !important;
}
.border-r{border-right: 1px solid #868686 !important;}
.tab-cc{
border: 1px solid #868686;
}
.border-bt{border-bottom: 1px solid #868686 !important;}
.titre-tab {
background:#b2b1b1;
}
and it appear like :
http://info-du-jour.net/wp-content/uploads/2014/06/php.png
fil in controller to convert into pdf :
$data = $this->data_paie($ids);
$this->load->view('paie/fdp_etat', $data);
// Get output html
$html = $this->output->get_output();
// Load library
$this->load->library('dompdf_gen');
// Convert to PDF
$this->dompdf->load_html($html);
$this->dompdf->render();
$this->dompdf->stream("fiche_de_paie.pdf",array('Attachment'=>0));
and it look like
http://info-du-jour.net/wp-content/uploads/2014/06/dompdf.png
html rendering code :
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="50" valign="top">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="font-size:24px; font-weight:bold;">BULLETIN DE PAIE</td>
<td align="right">
<img src="/logo/logo_simple1.jpg"
width="136" height="31" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table cellspacing="0" cellpadding="0">
<tr>
<td colspan="3" width="101"><strong>Période :</strong></td>
<td width="197" colspan="3" align="center">
<div style="font-size:14px; font-weight:bold;">
01-06-2014 au 30-06-2014 </div>
</td>
</tr>
</table>
</td>
</tr>
<tr><td> </td></tr>
<tr>
<td><table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="48%" valign="top">
<table border="0" cellpadding="0" cellspacing="2" class="tab-cc t-pad" width="100%" style="height:150px;">
<tr>
<td width="137"><strong>Matricule</strong></td>
<td width="217">SAL003</td>
</tr>
<tr>
<td><b>Nom et Prénom</b></td>
<td>AYARI Marwa</td>
</tr>
<tr>
<td><strong>Fonction</strong></td>
<td>Développeur</td>
</tr>
<tr>
<td><strong>Sit. familiale</strong></td>
<td>Marié </td>
</tr>
<tr>
<td><strong>Nbre d'enfants</strong></td>
<td>3</td>
</tr>
</table></td>
<td width="4%"> </td>
<td width="48%" align="left" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="2" class="tab-cc" style="height:150px;">
<tr>
<td align="center"><b>EMPLOYEUR</b></td>
</tr>
<tr>
<td align="center"><strong>TOPO+</strong><br />
6 Rue des Cyclamens<br />
1004 EL MENZAH 5, ARIANA.<br />
CNSS Employeur : 45454 </td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td><table border="1" cellspacing="2" cellpadding="0" class="tab-cc xls" width="48%" >
<tr>
<td rowspan="2"><b>Droit congés payés</b></td>
<td align="center">Ancien solde</td>
<td align="center">(+) Droits</td>
<td align="center">(-) Pris</td>
<td align="center">Nouv. solde</td>
</tr>
<tr>
<td align="center">12</td>
<td align="center">1</td>
<td align="center">5</td>
<td align="center">2</td>
</tr>
</table></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td>
<table width="100%" border="1" cellpadding="0" cellspacing="2" class="xls">
<tr class="titre-tab">
<td height="40"><strong>Désignation</strong></td>
<td><strong>Nombre</strong></td>
<td><strong>Base</strong></td>
<td><strong>Gains</strong></td>
<td><strong>Retenues</strong></td>
</tr>
<tr>
<td>Nombre de jours de présence</td>
<td align="right"> </td>
<td align="right"> </td>
<td align="right">26</td>
<td align="right"> </td>
</tr>
<tr>
<td>Salaire de base</td>
<td align="right"> </td>
<td align="right">1258,799</td>
<td align="right">1258,799</td>
<td align="right"> </td>
</tr>
<!-- autant de lignes que de primes dans la conv collective -->
<tr>
<td>Indemnité de transport</td>
<td align="right"> </td>
<td align="right">40,000</td>
<td align="right">40,000</td>
<td align="right"> </td>
</tr>
<tr>
<td>Prime de présence</td>
<td align="right"> </td>
<td align="right">2,080</td>
<td align="right">2,080</td>
<td align="right"> </td>
</tr>
<tr>
<td>Indemnité de déplacement</td>
<td align="right"> </td>
<td align="right">0,000</td>
<td align="right">0,000</td>
<td align="right"> </td>
</tr>
<tr>
<td> <b>Total Brut</b></td>
<td align="right"> </td>
<td align="right"> </td>
<td align="right">1300,879</td>
<td align="right"> </td>
</tr>
<tr>
<td>Retenu C.N.S.S</td>
<td align="right"> </td>
<td align="right">1300,879</td>
<td align="right"> </td>
<td align="right">119,421</td>
</tr>
<tr>
<td><b>SALAIRE IMPOSABLE</b></td>
<td align="right"> </td>
<td align="right"> </td>
<td align="right"> </td>
<td align="right">1181,458</td>
</tr>
<tr>
<td>IRPP</td>
<td align="right"> </td>
<td align="right"> </td>
<td align="right"> </td>
<td align="right">173,646</td>
</tr>
<tr>
<td> <b>Total Cotisations</b></td>
<td align="right"> </td>
<td align="right"> </td>
<td align="right"> </td>
<td align="right">293,067</td>
</tr>
<tr height="35">
<td> </td>
<td align="right"> </td>
<td align="right"> </td>
<td align="right"> </td>
<td align="right"> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td><table cellpadding="0" cellspacing="2" border="0" width="100%">
<tbody>
<tr height="21">
<td align="right"> </td>
<td></td>
<td></td>
<td></td>
</tr>
<tr height="21">
<td width="66%" align="right"><strong>Net à Payer</strong></td>
<td width="3%"></td>
<td width="2%"></td>
<td width="29%" colspan="2" align="right" class="tab-cc"><span style="font-weight:bold;padding-right: 4px;">1007,812</span> </td>
</tr>
<tr height="21">
<td align="right"> </td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table></td>
</tr>
<tr>
<td> </td>
</tr>
</table>

Answer 1

Instead of using $html = $this->output->get_output(); you can get the same HTML as it is rendering on browser . for that you need to make changes in script like :
$html = $this->load->view('paie/fdp_etat', $data , true); // so now your `$html` will be string which will return string from your view and both will be same.
For reference SEE HERE