table width 100% doesn't work

[Mr-TOA]

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 :)

[excodex]

Same issue here.

[AndrewMarkUK]

$content = '

Col One

Col 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

[rajesh-smartwebtech]

same issue here

[abhijeet-sendinblue]

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.

[BlutVampir]

same issue here. Issue still unresolved nearly 2 years later

[macr1408]

Just set the width to the columns

<table>
    <tr>
        <td style="width:33.3%" class="border-top border-bottom border-left">CONTENT</td>
        <td style="width:33.3%" class="border-top border-bottom text-center">CONTENT</td>
        <td style="width:33.4%" class="border-top border-bottom border-right text-right">CONTENT</td>
    </tr>
</table>