Mpdf - Render table with css - mpdf

Question

I've been trying to create a pdf of a mediawiki page with mpdf and wverything is fine, except all tables that are not correctly rendered.
I have isolated the problem and to reproduce it I create a simple example that shows what Im facing in there..
When trying to render the following table:
<style>
.wikitable tbody tr th, table.jquery-tablesorter thead tr th.headerSort, .header-cell {
background: #009999;
color: white;
font-family: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;
font-weight: bold;
font-size: 13pt;
}
.wikitable, table.jquery-tablesorter {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
.tabela, .wikitable {
border: 1px solid #A2A9B1;
border-collapse: collapse;
}
.tabela tbody tr td, .wikitable tbody tr td {
padding: 5px 10px 5px 10px;
border: 1px solid #A2A9B1;
border-collapse: collapse;
}
.config-value {
font-family: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;
font-size:13pt;
background: white;
font-weight: bold;
}
</style>
<table class="wikitable tabela">
<tr>
<th colspan="4"> SAP</th>
</tr>
<tr>
<td style="text-align: center;"> Servidor SAP </td>
<td class="config-value" colspan="3"> 10.18.254.71</td>
</tr>
<tr>
<td style="text-align: center;"> Instance Number</td>
<td class="config-value"> 00 </td>
<td style="text-align: center;"> System ID</td>
<td class="config-value"> 500</td>
</tr>
<tr>
<td style="text-align: center;"> Usuário</td>
<td class="config-value"> 234234 </td>
<td style="text-align: center;"> Senha</td>
<td class="config-value"> dev#2543</td>
</tr>
<tr>
<td style="text-align: center;"> Depósito</td>
<td class="config-value"> AWS </td>
<td style="text-align: center;"> Centro </td>
<td class="config-value"> 001</td>
</tr>
<tr>
<td style="text-align: center;"> Sistema de Depósito</td>
<td colspan="3" class="config-value"> WHY</td>
</tr>
<tr>
<td style="text-align: center;">SAP Router</td>
<td colspan="3" style=""text-align:left;" class="config-value"></td>
</tr>
</table>
we get the following result:
mpdf output
As the browser render as:
Table rendered by browser
The php code is:
<?php
require_once __DIR__ . '/mpdf/vendor/autoload.php';
$mpdf =new \Mpdf\Mpdf([
'mode' => 'utf-8'
]);
$mpdf->shrink_tables_to_fit = 0;
$mpdf->keep_table_proportions = true;
$html = file_get_contents('c:\TMP\html.html');
$mpdf->WriteHTML( $html );
$mpdf->Output( 'saida.pdf', 'F' );
How to make mpdf render the table correctly?

Answer 1

I resolved my issue aplying inline style using https://github.com/MyIntervals/emogrifier.