In my pdf print page table not show correctly

Question

I have a PDF print page on this print page I have a table I'm dividing that table in two-part by using col-md-4 but it shows wrong.

I am trying to show like this

                                            PAY SLIP PRIN
                       POOJA FACILITY MANAGEMENT SERVICES PVT.LTD.
Employee Name : abc
User ID :9

    col-md-4            col-md-4
  Baic pay   50       PF                 ----
  DA         20       ESI                ----
  Total      70       Total Deduction    ----  

But it shows wrong way you can see in bellow image.

My code:

<style>
table {
    width:100%;
    border-collapse: collapse;
}
th, td{
    border: 0.5px solid black;
}
@page {
    margin: 10px; 
    margin-header: 25px; 
    margin-footer: 25px;
}
</style>

<div class="content-wrapper"> 
<section class="content" >
  <div class="box box-primary">
    <div style="text-align: center;" class="box-header with-border">
        <h5 class="box-title">PAY SLIP PRINT </h5>
    </div>

            <div  class="col-md-12 row">
                <div class="col-md-12">
                    <div class="form-group" style="text-align: center;">
                         <b>POOJA FACILITY MANAGEMENT SERVICES PVT.LTD.</b>
                    </div>
                </div>
            </div>

    <?php 
        for ($i=0; $i < count($paySlip); $i++): 
        foreach ($paySlip[$i] as $cm):
            $tot = $cm['basic_pay']+$cm['pay_da'];
      ?>
<form role="form" id="print_pay_slip" method="POST" enctype="multipart/form-data">
<p>Employee Name :  <?php echo $cm['user_full_name']; ?></p>
<p>User ID       :  <?php echo $cm['emp_id']; ?></p>
<div class="row">
<div class="col-md-12">
<div class="col-md-1"></div>
<div class="col-md-4">

<div class="table-responsive">                      
    <table class="table table-bordered">
        <tbody>                                     

            <tr>
                <td colspan="1">Basic Pay</td>  
                <td colspan="1"><?php echo $cm['basic_pay']; ?></td>                                            
            </tr>
            <tr>
                <td>DA</td>
                <td><?php echo $cm['pay_da']; ?></td>
            </tr>
            <tr>
                <td colspan="1">Total</td>
                <td colspan="1"><?php echo $tot ?></td>
            </tr>
        </tbody>
    </table>
    </div>
</div>

<div class="col-md-4">
<div class="table-responsive">
<table class="table table-bordered">
    <tbody>                                     
        <tr>
            <td colspan="1">PF</td>  
            <td></td>                                           
        </tr>
        <tr>
            <td colspan="1">ESI</td>
            <td colspan="1"></td>
        </tr>
        <tr>
            <td colspan="1">Total Deductions</td>
            <td colspan="1"></td>
        </tr>
    </tbody>
</table>
</div>
</div>
<div class="col-md-1"></div>
</div>
</div>
</form>
    <?php
     endforeach;
     endfor;
    ?>
</section>
</div>

Controller:

public function PrintPage(){

        $data = array();
        $payslipId = $this->input->post("payslip_ids");

        for ($i = 0; $i < count($payslipId); $i++):

            $modelResult = $this->pay_model->multiPaySlipPrintPage($payslipId[$i]);
            $data['paySlip'][$i] = $modelResult;

        endfor;

        require_once 'vendor/autoload.php';
        $mpdf = new \Mpdf\Mpdf([
        'mode' => 'utf-8',
        'format' => 'A4',
        'orientation' => 'P'
        ]);

        $html = $this->load->view('pay_slip/print_pay_slip',$data, true);
        $mpdf->WriteHTML($html);
        $mpdf->Output(date('M').'_payslip.pdf', \Mpdf\Output\Destination::INLINE);

        }

Please help me with this to show the correct table in the PDF print page.

Answer 1

mPDF does not support Bootstrap styles entirely. An option would be some alternative such as headless-chrome based wkhtmltopdf.

But May be try this one

In my case, I'm using Bootstrap 3.3.7 with MPDF version 6.0. It's working perfectly without any error.

$stylesheet = file_get_contents('css/bootstrap-3.3.7.min.css');
$mpdf->WriteHTML($stylesheet, 1); // CSS Script goes here.
$mpdf->WriteHTML($html, 2); //HTML Content goes here.
$mpdf->Output();