Yii2 bootstrap table on the PDF is half width when deployed on the server

Question

In my Yii2 application I use kartik mpdf to generate PDF from html. I have a table on a PDF that is full width in my local machine (Windows) which is the expected behaviour. However, when I deploy it on the Ubuntu server, the table is half width.

I have cross checked the dependecy versions and both the enviornments have identicle dependencies as well.

I confirmed that the parent containers (div) of the table are behaving normally by placing texts within them. Its only the <table> element that gets dropped in size in the whole PDF when deployed.

<div class="row">
 <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
  <div class="table-responsive">
    <table class="table table-bordered" >
        <tbody>
        </tbody>
    </table>
  </div>
 </div>
</div>

This is my code for the table without the body.

Any idea whats happening behind and how to fix it?

Answer 1

After many struggles, I found that MPDF shrinks the table to fit the tallest row into one page. If you have multiple rows (cells) merged vertically then you'll run into this.

tables will resize so that the tallest row (cell) will fit on a page - this is the only one that cannot be overridden

It is mentioned in the troubleshooting section of the documentation.

Answer 2

You can add additional CSS:

$pdf = new Pdf([
    ..........
    'cssFile' => '@vendor/kartik-v/yii2-mpdf/assets/kv-mpdf-bootstrap.min.css',
    'cssInline' => '',
    .........
]);

With this css file my table are with 100% width. You can insert your own css file or add you css classes in cssInline

Answer 3

I was struggling with the great kartik/yii2-mpdf a couples of days ago and I learnt something. Just give to it the minimum CSS you need. For example, rules containing !important are totally ignored.

For this full width table, try adding style="width: 100%;" to the table tag.