locked
HTML table Overlap outer border RRS feed

  • 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">-->
                                            &nbsp;$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