php generated td overlaps data when data is longer than column width - php

Question

I have the following generated column for "Detail"
echo '<td width="100" align="left" bgcolor="#FFFFFF">Cheque (' . $row4['number'] . ')'. $row1['date_added'] .'</td>';
which gives me overall following table of results, where the particular column data overlaps when it is too long. What should I do? I have tried adding a '<br/>' in between, but it never worked.
Unfortunately this table had no external CSS file but the following is the full table
<table cellspacing="1" width="900" cellpadding="3" bgcolor="#CCCCCC" style="line-height:0px;margin-left: auto;margin-right: auto">
<col width="64" span="10" />
<tr height="46">
<td height="46" width="600" colspan="10" bgcolor="#FFFFFF"><h1>Blah Blah</h1></td>
</tr>
<?php
include './DatabaseConnection.php';
$db = new DatabaseConnection();
$db->createDatabaseConnection();
$cusid = $_GET['cusid'];
$startDate=$_GET['startDate'];
$endDate=$_GET['endDate'];
$query2 = mysql_query("select cusname from customers where cusid='$cusid'");
while ($row5 = mysql_fetch_array($query2)) {
echo '<tr height="20" width="1000">
<td height="10" colspan="10" bgcolor="#F3F3F3"><h2>Payment History of ' . $row5['cusname'] . ' (Credit)</h2></td>
</tr><tr height="20">
<td width="120" height="20" bgcolor="#FFFFFF"><h3>Date Added</h3></td>
<td width="120" bgcolor="#FFFFFF"><h3 align="center">Invoice Number</h3></td>
<td width="120" bgcolor="#FFFFFF"><h3 align="center">Invoice Amount</h3></td>
<td width="120" bgcolor="#FFFFFF"><h3 align="center">Payed Amount</h3></td>
<td width="120" bgcolor="#FFFFFF"><h3 align="center">Detail</h3></td>
<td width="120" bgcolor="#FFFFFF"><h3 align="center">Balance</h3></td>
</tr>';
}
//$query = mysql_query("SELECT * from payments where cusid ='$cusid' and ingrtype = '1' and payment_status = '1' and (date_added >= '$startDate' and date_added <= '$endDate') order by invoiceGRN_id") or die(mysql_error());
$query = mysql_query("SELECT * from payments where cusid ='$cusid' and ingrtype = '1' and payment_status = '1' and (date_added >= '$startDate' and date_added <= '$endDate') order by invoiceGRN_id") or die(mysql_error());
$lastinvoicenumber = null;
while ($row1 = mysql_fetch_array($query)) {
$invoiceAmount = $row1['subtotal'];
$payedAmount = $row1['payment'];
$invoicenumber = $row1['invoiceGRN_id'];
$invoicetotal = 0;
//$balanceAmount = $invoiceAmount - $payedAmount;
$balanceAmount = $invoiceAmount;
//diluk
$queryinv = mysql_query("SELECT invoice_subtotal from invoice where invoice_number ='$invoicenumber' limit 1") or die(mysql_error());
//diluk
while ($rowinv = mysql_fetch_array($queryinv)) {
$invoicetotal = $rowinv['invoice_subtotal'];
}
echo '<tr height="20">
<td width="100" align="left" bgcolor="#FFFFFF">' . $row1['date_added'] . '</td>';
if($lastinvoicenumber!=$invoicenumber){
echo '<td width="100" height="20" bgcolor="#FFFFFF">' . $row1['invoiceGRN_id'] . '</td>';
echo '<td width="100" align="right" bgcolor="#FFFFFF">' . $invoicetotal . '</td>';
}else{
echo '<td width="100" height="20" bgcolor="#FFFFFF"></td>';
echo '<td width="100" align="right" bgcolor="#FFFFFF"></td>';
}
echo '<td width="100" align="right" bgcolor="#FFFFFF">' . $row1['payment'] . '</td>';
$invId = $row1['invoiceGRN_id'];
if ($row1['paymentType'] == "Cheque") {
$query3 = mysql_query("select * from cheque where invoiceno='$invId'");
if ($row4 = mysql_fetch_array($query3)) {
echo '<td width="100" align="left" bgcolor="#FFFFFF">Cheque (' . $row4['number'] . ')'. $row1['date_added'] .'</td>';
}else{
echo '<td width="100" align="left" bgcolor="#FFFFFF">Cheque -' . $row1['date_added'] .'</td>';
}
} else {
echo '<td width="100" align="left" bgcolor="#FFFFFF">' . $row1['paymentType'] . '</td>';
}
echo '<td width="100" align="right" bgcolor="#FFFFFF">' . $balanceAmount . '</td>
</tr>';
$lastinvoicenumber = $invoicenumber;
}
echo '<tr height="20" width="1000">
<td height="10" colspan="10" bgcolor="#F3F3F3"><h2></h2></td></tr>';
$queryx = mysql_query("SELECT * from invoice where customer_id ='$cusid' and payment_type !='Credit' group by invoice_number order by invoice_date") or die(mysql_error());
while ($rowx = mysql_fetch_array($queryx)) {
echo '<tr height="20">
<td width="100" align="left" bgcolor="#FFFFFF">' . $rowx['invoice_date'] . '</td>
<td width="100" height="20" bgcolor="#FFFFFF">' . $rowx['invoice_number'] . '</td>
<td width="100" height="20" bgcolor="#FFFFFF">' . $rowx['invoice_subtotal'] . '</td>
<td width="100" height="20" bgcolor="#FFFFFF">' . $rowx['invoice_subtotal'] . '</td>';
$invId1 = $rowx['invoice_number'];
if ($rowx['payment_type'] == "Cheque") {
$queryx1 = mysql_query("select * from cheque where invoiceno='$invId1'");
if ($rowx2 = mysql_fetch_array($queryx1)) {
echo '<td width="100" align="left" bgcolor="#FFFFFF">Cheque (' . $rowx2['number'] . ')</td>';
}
} else {
echo '<td width="100" align="left" bgcolor="#FFFFFF">' . $rowx['payment_type'] . '</td>';
}
echo '<td width="100" align="right" bgcolor="#FFFFFF">0</td>
</tr>';
}
?>
</table>

Answer 1

There are 2 things you have to consider:
1. table-layout: fixed; this for table, and
2. word-wrap: break-word; to td itself.
For detailed see this question: How to force table cell <td> content to wrap?

Answer 2

I have also faced the same problem, just add \n to the end of every <tr> tag like this
echo "<tr><td></td><td></td></tr> \n"

Answer 3

you can check
echo '<td width="100" align="left" bgcolor="#FFFFFF"><div style="width:200px; word-wrap: break-word;overflow: auto;">Cheque (' . $row4['number'] . ')'. $row1['date_added'] .'</div></td>';

Answer 4

I solved the isue by making the table's "line-height" attribute to 20px like below,
<table cellspacing="1" width="900" cellpadding="3" bgcolor="#CCCCCC" style="line-height:20px;margin-left: auto;margin-right: auto">