Search code examples
phphtmlcssdompdf

Dompdf Table not fit


im make table pdf with dompdf

like this

laporan.php

<table style="width:100%" class="table table-striped table-bordered table-hover">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>NIS</th>
                                            <th>NISN</th>
                                            <th>Nama Siswa</th>
                                            <th>Kelas Siswa</th>
                                            <th colspan="3">Absensi</th>
                                            <th colspan="5">Ekskul Wajib</th>
                                            <th colspan="2">Ekskul Pilihan</th>
                                          
                                            
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                             <td></td>
                                            <td>Ijin</td>
                                            <td>Sakit</td>
                                            <td>Absen</td>
                                            <td>Pramuka SIT</td><td>Tahfidz</td><td>Melukis</td><td>Renang</td><td>Mentoring</td>                                             <td>Pilihan</td>
                                            <td>Nilai</td>
                                           
                                            
                                        </tr>
                                        
                                        <tr>
                                            <td>1</td>
                                            <td>0989</td>
                                            <td>12345678</td>
                                            <td>Dea</td>
                                            <td>1A</td>
                                            <td>4</td>
                                            <td>5</td>
                                            <td>2</td>
                                            <td>A</td><td>B</td><td>C</td><td>D</td><td>A</td><td>Memanah</td><td>C</td></tr><tr>
                                            <td>2</td>
                                            <td>1234</td>
                                            <td>90909090</td>
                                            <td>Ardi</td>
                                            <td>1A</td>
                                            <td>1</td>
                                            <td>0</td>
                                            <td>3</td>
                                            <td>C</td><td>D</td><td>B</td><td>E</td><td>A</td><td>Sepak Bola</td><td>A</td></tr><tr>
                                            <td>3</td>
                                            <td>2000</td>
                                            <td>20202020</td>
                                            <td>Azam</td>
                                            <td>1A</td>
                                            <td>0</td>
                                            <td>0</td>
                                            <td>1</td>
                                            <td></td><td></td><td></td><td></td><td></td><td>Memanah</td><td>A</td></tr>                                        
                                    </tbody>
                                </table>

then export it with button and buffer it with css element

print.php

<?php

$value='laporan.php';
ob_start();
require 'dompdf/autoload.inc.php';

 $abc=  include $value;
 $css=  include 'css.php';
use Dompdf\Dompdf;

$dompdf= new Dompdf();

$dompdf->loadHtml(ob_get_clean());
$dompdf->setPaper('A4','landscape');
$dompdf->render();


$dompdf->stream($value,array("Attachment"=>0));
?>

and css.php



    <style type="text/css" media="all">
    <!-- BOOTSTRAP STYLES-->
    <?php include 'assets/css/bootstrap.css' ?>
    <!-- FONTAWESOME STYLES-->
    <?php include 'assets/css/font-awesome.css'?>
     <!-- PAGE LEVEL STYLES-->
   <?php include 'assets/css/error.css'?>
    <!-- GOOGLE FONTS-->
     <?php include 'assets/css/basic.css'?>
     <?php include 'assets/css/custom.css'?>
table, td, th {
            border: 1px solid black;
        }

table {
       border-collapse: collapse;
       width: 100%;
        }

.table-no-border tr td th{
      border : none;
 }

 td {
    height: 50px;
    vertical-align: middle;
    text-align: center;
  }
   
   </style>

some view is exactly same with the page, but why on center the table add table some from nowhere, where my mistake, i transfer my code above and no one missing

the result of pdf is

...this image result from dompdf result

this is from web view result

web result


Solution

  • From the Dompdf github page:

    Handles most CSS 2.1 and a few CSS3 properties, including @import, @media & @page rules

    My best guess here is that some of your styling has CSS3 properties that Dompdf does not support, but your browser does, so that is why you get different outputs.

    Seeing that you use bootstrap, I found these issues that might help: