Search code examples
csshtml-tabledompdf

dompdf [v0.7.0-beta3] table using inline css

Why is inline CSS ignored to render when I'm using inline CSS in a table?

I was trying using width, margin for making long td but it ignored to render.

Here is index.php

$laporan .='<table border="1">
             <tr>
                 <td style="margin: 1em;"></td>
                 <td width="227px"></td>
                 <td style="text-align:center;" width="150px">Mengetahui</td>
             </tr>
             <tr>
                 <td max-width="230px"></td>
                 <td width="227px"></td>
                 <td style="text-align:center;" width="150px">Kepala PDAM</td>
             </tr>
             <tr>
                 <td rowspan="4"></td>
                 <td></td>
             </tr>
             <tr><td></td></tr>
             <tr><td></td></tr>
             <tr><td></td></tr>
             <tr><td></td></tr>
             <tr>
                 <td width="230px"></td>
                 <td width="227px"></td>
                 <td style="text-align:center;" width="150px"><u>Prof.Dr.Raymond Renoldy</u></td>
             </tr>
             <tr>
                 <td width="230px"></td>
                 <td width="227px"></td>
                 <td style="text-align:center;" width="150px">NIP.123 0987 0973</td>
             </tr>
         </table>';

pdf result when run

Solution

  • There appears to be buggy behavior around setting the cell width. More research would need to happen before I could say exactly why this is happening, but it appears adding a non-breaking space to the empty cells in the first row works around the problem.

    Feel free to post a bug report to the issue tracker: https://github.com/dompdf/dompdf/issues/new

    That being said, your inline css isn't quite what you think. If your code sample is accurate you appear to be mixing up HTML attributes and inline css. HTML attributes for width do not take a unit (though I believe dompdf will accept it) and an attribute for max-width doesn't exist.

    Try the following HTML, which both addresses the original issue and cleans up your HTML:

    <table border="1">
  <tr>
    <td style="margin: 1em;">&nbsp;</td>
    <td style="width: 227px">&nbsp;</td>
    <td style="text-align:center; width: 150px;">Mengetahui</td>
  </tr>
  <tr>
    <td style="max-width: 230px;"></td>
    <td style="width: 227px;"></td>
    <td style="text-align: center; width: 150px;">Kepala PDAM</td>
  </tr>
  <tr>
    <td rowspan="4"></td>
    <td></td>
  </tr>
  <tr><td></td></tr>
  <tr><td></td></tr>
  <tr><td></td></tr>
  <tr><td></td></tr>
  <tr>
    <td style="width: 230px;"></td>
    <td style="width: 227px;"></td>
    <td style="text-align:center; width: 150px;"><u>Prof.Dr.Raymond Renoldy</u></td>
  </tr>
  <tr>
    <td style="width: 230px;"></td>
    <td style="width: 227px;"></td>
    <td style="text-align:center; width: 150px;">NIP.123 0987 0973</td>
  </tr>
</table>

    Also note that there are some issues when rendering tables with dompdf. The way widths are calculated can cause dompdf to ignore specific width/max-width styling if the content exceeds that width.