html2pdf icon indicating copy to clipboard operation
html2pdf copied to clipboard

table width 100% doesn't work

Open Mr-TOA opened this issue 5 years ago • 6 comments

Hi, is there anyway that i can fit the table to the page (A4), it's a dynamic table the table picture none of below worked

<table width="100%">
<table style="width:100%;">
<table class="w100">
<link rel="stylesheet" href="style.css" />

my code:

$content = '<table>
    <thead>
        <tr>
            <th class="bg-dark text-white" align="center">#</th>
            <th align="center" class="bg-dark text-white">Code</th>
            <th align="left" class="bg-dark text-white">Description</th>
            <th align="center" class="bg-dark text-white">Item Type</th>
        </tr>
    </thead>
    <tbody>
        <tr style="background-color: #f2f2f2;">
            <td align="center">1</td>
            <td align="center">1001</td>
            <td align="left">Pofak</td>
            <td align="center">Fixed Price</td>
        </tr>
        <tr>
            <td align="center">2</td>
            <td align="center">1002</td>
            <td align="left">Ice</td>
            <td align="center">Weight</td>
        </tr>
        <tr style="background-color: #f2f2f2;">
            <td align="center">3</td>
            <td align="center">1003</td>
            <td align="left">Minoo</td>
            <td align="center">Fixed Price</td>
        </tr>
    </tbody>
</table>';
$newContent = '
    <style type="text/css">
    table{width:100%;}
    table, table td, table th{
        border-collapse: collapse;
        border: solid 1px #ababab;
    }
    .text-dark, table td{
        color: #343a40;
    }
    .text-white{
        color: #ffffff;
    }
    table td,
    table th {
        font-size: 11px;
        padding: 3px;
        line-height: 1.2;
        font-family:arial;
    }

    .bg-dark {
        background-color: #343a40;
    }
    .bg-secondary {
        background-color: #6c757d;
    }
    .bg-white {
        background-color: #ffffff;
    }
    .text-left {
        text-align: left;
    }
    .text-right {
        text-align: right;
    }
    .text-center {
        text-align: center;
    }
    </style>
    ';
    $newContent .= '<page>'.$content.'</page>';

    try {
        $html2pdf = new Html2Pdf('P', 'A4', 'en', true, 'UTF-8', 5);
        $html2pdf->pdf->SetDisplayMode('real');
        $html2pdf->writeHTML($newContent);
        $PDFName = "ItemLists_".date('Y.m.d_H.i.s').".pdf";
        $html2pdf->output($PDFName, 'I');
    } catch (Html2PdfException $x) {
        $html2pdf->clean();

        $formatter = new ExceptionFormatter($x);
        echo $formatter->getHtmlMessage();
    }

Thanks :)

Mr-TOA avatar Jan 03 '20 12:01 Mr-TOA

Same issue here.

excodex avatar Apr 14 '20 13:04 excodex

$content = '

Col OneCol Two
'

set the widths of td (without px) for each td. This will determine width of table for you. In this case Col one is 500 and Col two is 200

AndrewMarkUK avatar Apr 17 '20 12:04 AndrewMarkUK

same issue here

rajesh-smartwebtech avatar Feb 17 '21 08:02 rajesh-smartwebtech

In my case When there is and increase in column count the column gets cropped from the right. For Example :- In case of 10 column the two from the right will be cropped as if it doesn't exist or sometime 1/2 is cropped and partial of one is visible. I tried setting width and all but it didn't effect this anyhow. Can anyone suggest a solution for the same. @spipu Please can you look into this.

abhijeet-sendinblue avatar Nov 12 '21 06:11 abhijeet-sendinblue

same issue here. Issue still unresolved nearly 2 years later

BlutVampir avatar Sep 28 '23 09:09 BlutVampir