Problems displaying rowspan in dompdf and cakephp

5
votes

I have been searching through the Internet searching for a solution to my problem. I am currently using CakePhp + dompdf to generate a PDF. It works fine on normal tables, but when I add rowspans and colspans it creates the table but the borders are ruined.

This is my HTML markup for generating the PDF:

<style>table{border-collapse:collapse;}.rows td{border:1px solid brown;</style>
<table class="sub_cat_table">
    <tbody><tr class="rows">
        <td colspan="2">カテゴリ</td>
            <td>重要度</td>
            <td>実現度</td>
            <td colspan="2">項目（キーワード）</td>
            <td colspan="2">重要度</td>
            <td colspan="2">実現度</td>
            <td colspan="2">格差</td>
        </tr>
        <tr class="rows">
            <td rowspan="2" class="sub_cat_letter"> A </td>
            <td rowspan="2" class="sub_cat_name">Situation</td>
            <td rowspan="2" class="sub_cat_imp">3.5</td>
            <td rowspan="2" class="sub_cat_pos">2.0</td>                                            
        </tr>
        <tr class="rows">
            <td class="sub_cat_number">1</td>
            <td class="sub_cat_name">Complete</td>
            <td class="sub_cat_imp_inner">3.0</td>
            <td class="sub_cat_imp_inner"></td>
            <td class="sub_cat_imp_inner">2.0</td>
            <td class="sub_cat_imp_inner">  ●</td>
            <td class="sub_cat_imp_inner">-1</td>
            <td class="sub_cat_imp_inner"></td>
        </tr>
        <tr class="rows">
            <td class="sub_cat_number">2</td>
            <td class="sub_cat_name">Access</td>
            <td class="sub_cat_imp_inner">4.0</td>
            <td class="sub_cat_imp_inner"></td>
            <td class="sub_cat_imp_inner">2.0</td>
            <td class="sub_cat_imp_inner">● </td>
            <td class="sub_cat_imp_inner">-2</td>
            <td class="sub_cat_imp_inner"></td>
        </tr>
        <tr class="rows">
            <td rowspan="3" class="sub_cat_letter">B</td>
            <td rowspan="3" class="sub_cat_name">Technology</td>
            <td rowspan="3" class="sub_cat_imp">3.4</td>
            <td rowspan="3" class="sub_cat_pos">1.9</td>                                            
        </tr>
        <tr class="rows">
            <td class="sub_cat_number">3</td>
            <td class="sub_cat_name">Quality</td>
            <td class="sub_cat_imp_inner">3.7</td>
            <td class="sub_cat_imp_inner"></td>
            <td class="sub_cat_imp_inner">1.7</td>
            <td class="sub_cat_imp_inner"></td>
            <td class="sub_cat_imp_inner">-2</td>
            <td class="sub_cat_imp_inner">▼ </td>
        </tr>
        <tr class="rows">
            <td class="sub_cat_number">4</td>
            <td class="sub_cat_name">Access</td>
            <td class="sub_cat_imp_inner">3.0</td>
            <td class="sub_cat_imp_inner"></td>
            <td class="sub_cat_imp_inner">2.0</td>
            <td class="sub_cat_imp_inner">● </td>
            <td class="sub_cat_imp_inner">-1</td>
            <td class="sub_cat_imp_inner"></td>
        </tr>
    </tbody>
</table>

Print screen in HTML (sorry, the table has border above):

enter image description here

Print screen in generating PDF in dompdf:

enter image description here

I've been trying to play with the file dompdf/includes/cellmap.cls.php, but I can't get it to work.

I already tried these solutions here:

And some links I already forgot. Any advice or workaround is very much appreciated.

3
phpcakephpdompdf
my rule, if one html to pdf, php converter does not work for the project, try one of the other ones. - user557846
yes i already tried CakePdf, but i cant get it to work. also tried mpdf and cant get to this output. the closest one was dompdf. - roullie
html to pdf with php is always a troublesome, its like taping cats together. I mostly use tcpdf tcpdf.org - user557846
if you post the exact html i will test it on tcpdf and show you the results so you don't have to install it - user557846
yes the html markup is already on my question above - roullie

3 Answers

2
votes

I think you don't need to change your dompdf to create PDF, You just need to arrange your table specially the row span rule. When creating a table using row span it should be like this:

<table border="1">
  <tr>
    <td rowspan="3">&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

enter image description here

0
votes

Its really not much of an "answer" but i suggest switching using tcpdf. I have found it does the best overall job of rendering html to pdf, its also some what easier to customise than other pdf libraries.

code used to generate example:

<?php


// Include the main TCPDF library (search for installation path).
require_once('../tcpdf.php');

// create new PDF document
$pdf = new TCPDF(PDF_PAGE_ORIENTATION, PDF_UNIT, PDF_PAGE_FORMAT, true, 'UTF-8', false);


// set default monospaced font
$pdf->SetDefaultMonospacedFont(PDF_FONT_MONOSPACED);

// set margins
$pdf->SetMargins(PDF_MARGIN_LEFT, PDF_MARGIN_TOP, PDF_MARGIN_RIGHT);
$pdf->SetHeaderMargin(PDF_MARGIN_HEADER);
$pdf->SetFooterMargin(PDF_MARGIN_FOOTER);

// set auto page breaks
$pdf->SetAutoPageBreak(TRUE, PDF_MARGIN_BOTTOM);

// set image scale factor
$pdf->setImageScale(PDF_IMAGE_SCALE_RATIO);

// set some language-dependent strings (optional)
if (file_exists(dirname(__FILE__).'/lang/eng.php')) {
    require_once(dirname(__FILE__).'/lang/eng.php');
    $pdf->setLanguageArray($l);
}

// ---------------------------------------------------------

// set default font subsetting mode
$pdf->setFontSubsetting(true);

// Set font
// dejavusans is a UTF-8 Unicode font, if you only need to
// print standard ASCII chars, you can use core fonts like
// helvetica or times to reduce file size.
$pdf->SetFont('dejavusans', '', 6, '', true);

// Add a page
// This method has several options, check the source code documentation for more information.
$pdf->AddPage();

// set text shadow effect
//$pdf->setTextShadow(array('enabled'=>true, 'depth_w'=>0.2, 'depth_h'=>0.2, 'color'=>array(196,196,196), 'opacity'=>1, 'blend_mode'=>'Normal'));

// Set some content to print
$html = <<<EOD
<style>table{border-collapse:collapse;}.rows td{border:1px solid brown;</style>
<table class="sub_cat_table">
    <tbody><tr class="rows">
        <td colspan="2">カテゴリ</td>
            <td>重要度</td>
            <td>実現度</td>
            <td colspan="2">項目（キーワード）</td>
            <td colspan="2">重要度</td>
            <td colspan="2">実現度</td>
            <td colspan="2">格差</td>
        </tr>
        <tr class="rows">
            <td rowspan="2" class="sub_cat_letter"> A </td>
            <td rowspan="2" class="sub_cat_name">Situation</td>
            <td rowspan="2" class="sub_cat_imp">3.5</td>
            <td rowspan="2" class="sub_cat_pos">2.0</td>
        </tr>
        <tr class="rows">
            <td class="sub_cat_number">1</td>
            <td class="sub_cat_name">Complete</td>
            <td class="sub_cat_imp_inner">3.0</td>
            <td class="sub_cat_imp_inner"></td>
            <td class="sub_cat_imp_inner">2.0</td>
            <td class="sub_cat_imp_inner">  ●</td>
            <td class="sub_cat_imp_inner">-1</td>
            <td class="sub_cat_imp_inner"></td>
        </tr>
        <tr class="rows">
            <td class="sub_cat_number">2</td>
            <td class="sub_cat_name">Access</td>
            <td class="sub_cat_imp_inner">4.0</td>
            <td class="sub_cat_imp_inner"></td>
            <td class="sub_cat_imp_inner">2.0</td>
            <td class="sub_cat_imp_inner">● </td>
            <td class="sub_cat_imp_inner">-2</td>
            <td class="sub_cat_imp_inner"></td>
        </tr>
        <tr class="rows">
            <td rowspan="3" class="sub_cat_letter">B</td>
            <td rowspan="3" class="sub_cat_name">Technology</td>
            <td rowspan="3" class="sub_cat_imp">3.4</td>
            <td rowspan="3" class="sub_cat_pos">1.9</td>
        </tr>
        <tr class="rows">
            <td class="sub_cat_number">3</td>
            <td class="sub_cat_name">Quality</td>
            <td class="sub_cat_imp_inner">3.7</td>
            <td class="sub_cat_imp_inner"></td>
            <td class="sub_cat_imp_inner">1.7</td>
            <td class="sub_cat_imp_inner"></td>
            <td class="sub_cat_imp_inner">-2</td>
            <td class="sub_cat_imp_inner">▼ </td>
        </tr>
        <tr class="rows">
            <td class="sub_cat_number">4</td>
            <td class="sub_cat_name">Access</td>
            <td class="sub_cat_imp_inner">3.0</td>
            <td class="sub_cat_imp_inner"></td>
            <td class="sub_cat_imp_inner">2.0</td>
            <td class="sub_cat_imp_inner">● </td>
            <td class="sub_cat_imp_inner">-1</td>
            <td class="sub_cat_imp_inner"></td>
        </tr>
    </tbody>
</table>
EOD;

// Print text using writeHTMLCell()
$pdf->writeHTMLCell(0, 0, '', '', $html, 0, 1, 0, true, '', true);

// ---------------------------------------------------------

// Close and output PDF document
// This method has several options, check the source code documentation for more information.
$pdf->Output('example_001.pdf', 'I');

//============================================================+
// END OF FILE
//============================================================+
0
votes

You just need to use rowspan correctly, you must add the rest of the columns in the same row, here is the code to create the table as you wish.

table {
  border-collapse: collapse;
}

.rows td {
  border: 1px solid brown;
}
<table class="sub_cat_table">
  <tbody>
    <tr class="rows">
      <td colspan="2">カテゴリ</td>
      <td>重要度</td>
      <td>実現度</td>
      <td colspan="2">項目（キーワード）</td>
      <td colspan="2">重要度</td>
      <td colspan="2">実現度</td>
      <td colspan="2">格差</td>
    </tr>
    <tr class="rows">
      <td rowspan="2" class="sub_cat_letter"> A </td>
      <td rowspan="2" class="sub_cat_name">Situation</td>
      <td rowspan="2" class="sub_cat_imp">3.5</td>
      <td rowspan="2" class="sub_cat_pos">2.0</td>
      <td class="sub_cat_number">1</td>
      <td class="sub_cat_name">Complete</td>
      <td class="sub_cat_imp_inner">3.0</td>
      <td class="sub_cat_imp_inner">&nbsp;</td>
      <td class="sub_cat_imp_inner">2.0</td>
      <td class="sub_cat_imp_inner"> ●</td>
      <td class="sub_cat_imp_inner">-1</td>
      <td class="sub_cat_imp_inner"></td>
    </tr>
    <tr class="rows">
      <td class="sub_cat_number">2</td>
      <td class="sub_cat_name">Access</td>
      <td class="sub_cat_imp_inner">4.0</td>
      <td class="sub_cat_imp_inner">&nbsp;</td>
      <td class="sub_cat_imp_inner">2.0</td>
      <td class="sub_cat_imp_inner">● </td>
      <td class="sub_cat_imp_inner">-2</td>
      <td class="sub_cat_imp_inner"></td>
    </tr>
    <tr class="rows">
      <td rowspan="2" class="sub_cat_letter">B</td>
      <td rowspan="2" class="sub_cat_name">Technology</td>
      <td rowspan="2" class="sub_cat_imp">3.4</td>
      <td rowspan="2" class="sub_cat_pos">1.9</td>
      <td class="sub_cat_number">3</td>
      <td class="sub_cat_name">Quality</td>
      <td class="sub_cat_imp_inner">3.7</td>
      <td class="sub_cat_imp_inner">&nbsp;</td>
      <td class="sub_cat_imp_inner">1.7</td>
      <td class="sub_cat_imp_inner">&nbsp;</td>
      <td class="sub_cat_imp_inner">-2</td>
      <td class="sub_cat_imp_inner">▼ </td>
    </tr>
    <tr class="rows">
      <td class="sub_cat_number">4</td>
      <td class="sub_cat_name">Access</td>
      <td class="sub_cat_imp_inner">3.0</td>
      <td class="sub_cat_imp_inner">&nbsp;</td>
      <td class="sub_cat_imp_inner">2.0</td>
      <td class="sub_cat_imp_inner">● </td>
      <td class="sub_cat_imp_inner">-1</td>
      <td class="sub_cat_imp_inner">&nbsp;</td>
    </tr>
  </tbody>
</table>