Reputation: 3398

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

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. enter image description here

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>

Upvotes: 0

Answers (4)

Dilukshan Mahendra

Reputation: 3398

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">

Upvotes: 0

user3470953

Reputation: 11325

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>';

Upvotes: 0