TCPDF table header automatically move to the right - php

Question

I have created a table with TCPDF. The header, which has a black background, has been positioned slightly to the right as though there is some padding on the left hand side. I cannot get it to line up correctly.
The code below is the HTML I have written to form the table.
$tbl ='<style>
th {background-color: black;color: white;float:left;}
.tal {text-align: left;float:left;}
</style>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<th width="60px" style="border-right: 1px solid white;"><strong>Qty</strong></th>
<th width="1px"></th>
<th class="tal" width="388px" style="padding:10px 0; border-right: 1px solid white;"> <strong>Product or Service</strong></th>
<th width="1px"></th>
<th width="84px" style="border-right: 1px solid white;"><strong>Price Each</strong></th>
<th width="1px"></th>
<th width="84px"><strong>Total</strong></th>
</tr>
<tr>
<td height="267px">';
while($i <= $a) {
$tbl .= '<table height="267px" width="60px"><tr><td>' . $productsArray['product_quantity'][$i] . '</td></tr></table>';
$i++;
}
$tbl .= '</td><td border="1" width="0.5px" height="267px" style="background:url(images/bars-black.jpg) bottom right no-repeat"></td><td height="267px">';
while($j <= $a) {
$tbl .= '<table height="267px" width="388px"><tr><td class="tal"> ' . $productsArray['product_name'][$j] . '</td></tr></table>';
$j++;
}
$tbl .= '</td><td width="0.5px" height="267px" style="background:url(images/bars-black.jpg) bottom right no-repeat"></td><td height="267px">';
while($k <= $a) {
$tbl .= '<table height="267px" width="84px"><tr><td>' . $productsArray['product_price'][$k] . '</td></tr></table>';
$k++;
}
$tbl .= '</td><td border="1" width="0.5px" height="267px" style="background:url(images/bars-black.jpg) bottom right no-repeat"></td><td height="267px">';
while($l <= $a) {
$tbl .= '<table height="267px" width="84px"><tr><td>' . $productsArray['product_sub'][$l] . '</td></tr></table>';
$l++;
}
$tbl .= '</td>
</tr>
</table>';
}
The below code is the PHP I have used to show the table on the page.
$pdf->writeHTMLCell(175, 80, 20, 100, $tbl, 1, 1, 0, true, 'C', true);

Answer 1

Using tables within cells of another table is generally a really bad idea and is likely contributing to the problem you are having. Since it looks like your productsArray already has all of the data you need I would simply loop through it outputting each row as you go.
It's also worth pointing out that the empty header rows that are defined with a width of 1px conflict with your actual data rows which are defined with a width of 0.5px.
<style>
th {background-color: black;color: white;float:left;}
.tal {text-align: left;float:left;}
</style>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<th width="60px" style="border-right: 1px solid white;"><strong>Qty</strong></th>
<th width="1px"></th>
<th class="tal" width="388px" style="padding:10px 0; border-right: 1px solid white;"> <strong>Product or Service</strong></th>
<th width="1px"></th>
<th width="84px" style="border-right: 1px solid white;"><strong>Price Each</strong></th>
<th width="1px"></th>
<th width="84px"><strong>Total</strong></th>
</tr>
<?php
while($i <= $a) {
?>
<tr>
<td height="267px"><?php echo $productsArray['product_quantity'][$i]; ?></td>
<td border="1" width="0.5px" height="267px" style="background:url(images/bars-black.jpg) bottom right no-repeat"></td>
<td height="267px"><?php echo $productsArray['product_name'][$i]; ?></td>
<td width="0.5px" height="267px" style="background:url(images/bars-black.jpg) bottom right no-repeat"></td>
<td height="267px"><?php echo $productsArray['product_price'][$i]; ?></td>
<td border="1" width="0.5px" height="267px" style="background:url(images/bars-black.jpg) bottom right no-repeat"></td>
<td height="267px"><?php echo $productsArray['product_sub'][$l]; ?></td>
</tr>
<?php
$i++;
}
?>
</table>