Asked by:
HTML table Overlap outer border

Question
-
User1800404181 posted
I created an HTML. I need that inner table border should touch outer table border. Any help would be highly appricated. Please find below HTML code:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> </head> <body> <table width="100%" > <tr> <td style="border-collapse:collapse "> <table width="100%" style="font-size: small; border-color: black; border-collapse: collapse"> <tr> <td style="border-bottom: solid 1px; border-top:solid 1px; border-left:solid 1px; border-right:solid 1px"> <table width="100%"> <tr> <td align="left" width="15%" style="background-image:"> <!--<img src="D:/Sanjeev/IntelLogicIt-InternalProducts/SalesQuickInvoiceWindows/SalesQuickInvoiceWindows/SalesQuickInvoiceWindows/bin/Debug/ShrinathjiTexconeDV-2.jpg">--> $LogoImage </td> <td> <table width="100%"> <tr> <td align="center" style="font-size:0.75cm"><strong>$OrgName</strong></td> </tr> <tr> <td align="center">$OrgGSTIN $OrgPAN</td> </tr> $CompContacts <!--<tr> <td align="center">$OrgAddressType$ $OrgAddress$ <br>$OrgCity$ $OrgState$ $OrgCountry$ <br> $OrgPhoneFax$</td> </tr> <tr> <td align="center">$OrgAddressType2$ $OrgAddress2$ <br>$OrgCity2$ $OrgState2$ $OrgCountry2$ <br> $OrgPhoneFax2$</td> </tr>--> <tr> <td align="center">$OrgEmailWeb</td> </tr> </table> </td> <td align="right" width="25%" valign="top" style="border-left: dotted 1px; border-collapse: collapse; "> <table style="height:120px; width:100%; "> <tr> <td> $InvoiceName </td> </tr> <tr> <td> <strong>Invoice No : $InvoiceNumber</strong> </td> </tr> <tr> <td> Invoice Date : $InvoiceDate </td> </tr> </table> </td> </tr> </table> </td> </tr> <tr> <td align="center" bgcolor="silver" style="border-bottom: solid 1px; border-top:solid 1px; border-left:solid 1px; border-right:solid 1px"><strong style="font-size:large">$InvoiceTypeName</strong>$InvoiceTypeTagLine</td> </tr> <tr> <td style="border-bottom: solid 1px; border-top:solid 1px; border-left:solid 1px; border-right:solid 1px"> <table width="100%"> <tr> <td> Transporter Name : $TransporterName </td> <td> PO No: $PONum </td> </tr> <tr> <td> GR No : $GRNo </td> <td> PO Date: $PODate </td> </tr> <tr> <td> GR Date : $GRDate </td> <td> Date of Supply : $DateOfSupply </td> </tr> <tr> <td> Vehicle Number : $VehicleNumber </td> <td> Place of Supply : $PlaceOfSupply </td> </tr> <tr> <td> Transport Mode : $TransportMode </td> <td> Reverse Charges (Y/N) : $ReverseCharges </td> </tr> </table> </td> </tr> <tr> <td style="border-bottom: solid 1px; border-top:solid 1px; border-left:solid 1px; border-right:solid 1px; border-collapse:collapse;"> <table width="100%" style="border-collapse: collapse;"> <tr> <td style="border-right: solid 1px; border-collapse:collapse;"> <table width="100%" style="border-collapse:collapse"> <tr> <td style="border-bottom: solid 1px; border-collapse: collapse;"> <strong>Details of Receiver (Billed To)</strong> </td> </tr> <tr> <td> $BlOrgName </td> </tr> <tr> <td> $BlAddress </td> </tr> <tr> <td> $BlCity$BlZipcode </td> </tr> <tr> <td> $BlContactState $BlContactCountry </td> </tr> <tr> <td> <table width="100%"> <tr> <td>$BlGSTIN</td> <td>$BlPAN</td> </tr> </table> </td> </tr> </table> </td> <td> <table width="100%" style="border-collapse: collapse;"> <tr> <td style="border-bottom:solid 1px;"> <strong>Details of Consignee (Shipped To)</strong> </td> </tr> <tr> <td> $SlOrgName </td> </tr> <tr> <td> $SlAddress </td> </tr> <tr> <td> $SlCity$SlZipcode </td> </tr> <tr> <td> $SlContactState $SlContactCountry </td> </tr> <tr> <td> <table width="100%"> <tr> <td>$SlGSTIN</td> <td>$SlPAN</td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </td> </tr> <tr> <td height="110" valign="top" style="border-bottom: solid 1px; border-top:solid 1px; border-left:solid 1px; border-right:solid 1px"> $OrderItems </td> </tr> <tr> <td style="border-bottom: solid 1px; border-top: solid 1px; border-left: solid 1px; border-right: solid 1px; border-collapse: collapse;"> <table width="100%" style="border-collapse: collapse;"> <tr> <td valign="top" align="left" style="font-size: small; width: 65%; border-collapse: collapse; "> <table width="100%" style="border-collapse:collapse;" > <tr> <td style="border-bottom: solid 1px; border-collapse: collapse;"> <table> <tr> <td> Bank Name : $BankName </td> </tr> <tr> <td> Bank A/C : $BankAC </td> </tr> <tr> <td> Bank IFSC : $BankIFSC </td> </tr> </table> </td> </tr> <tr> <td> Total Taxes in Words : $taxesInWords </td> </tr> <tr> <td> Total Amount in Words : $amtInWords </td> </tr> </table> </td> <td align="right" valign="top" style="border-left:solid 1px;border-collapse:collapse;"> <table width="100%" > <tr> <td align="right" style="font-size:small"> $OrderPriceDetails </td> </tr> </table> </td> </tr> </table> </td> </tr> <tr> <td style="border-bottom: solid 1px; border-top: solid 1px; border-left: solid 1px; border-right: solid 1px; border-collapse: collapse;"> <table cellspacing="4"> <tr> <td> <small>Certified that the perticulars given above are true & correct the amount indecated represent the price actually charged & that there is no flow of additional consideration directly or indirectly from the buyer. </small> </td> </tr> </table> </td> </tr> <tr> <td style="border-bottom: solid 1px; border-top: solid 1px; border-left: solid 1px; border-right: solid 1px; border-collapse: collapse;"> <table width="100%" style="border-collapse: collapse;"> <tr> <td width="60%" align="left" valign="top" style="border-collapse: collapse; "><small>$TermsCondition</small></td> <td width="20%" align="center" style="border-collapse: collapse; border-left: solid 1px; border-right:solid 1px; text-align:end; "> <br><br><br><br><br><br><br><br><br>Common Seal </td> <td width="20%" align="center" style="border-collapse: collapse; "> For $OrgName<br><br><br><br><br><br><br><br>Authorised Signatory </td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </body> </html>
Tuesday, January 2, 2018 6:56 AM
All replies
-
User-1838255255 posted
Hi sanjeev_asp.net,
I need that inner table border should touch outer table border.I am not clear this sentence's meaning, could you show your needs in image format?
Best Regards,
Eric Du
Tuesday, January 2, 2018 8:55 AM -
User1800404181 posted
Hi Eric,
I created a HTML containing nested Tables that table inside td of outer table. Now I want that borders of my inner table should touch border of outer table. As you can see in below image I circled with red color, you can see that there is some gap and inner table border is not touching outer table border. I want to remove this gap.
Tuesday, January 2, 2018 12:17 PM -
User-1838255255 posted
Hi sanjeev_asp.net,
Please try add the following style code:
<style> * { padding: 0; } </style>
Result:
Best Regards,
Eric Du
Wednesday, January 3, 2018 6:15 AM