locked
Spaces are not getting removed RRS feed

  • Question

  • User-797751191 posted

    Hi

      When i print this particulat div it shows spaces.

    <div>
    <table id = "myTbl" style="border-collapse: collapse;border-spacing: 0; ">
                                    <tr>
                                        <th>
                                        </th>
                                    </tr>
    
    <tr>
                                        <td>
                                            <table id="tblInner" style="margin:0 auto;width:75%;"> 
                                                <tr>
                                                    <th style="width:10%; text-align: left;font-weight: bold;font-size: 14px;padding: 5px;font-family: Arial, sans-serif;border: 1px solid #ddd!important;border-collapse:collapse;"></th>
                                                    <th style="width:35%;text-align: left;font-weight: bold;font-size: 14px;padding: 5px;font-family: Arial, sans-serif; border: 1px solid #ddd!important;border-collapse:collapse;">No</th>
                                                    <th style="width:35%;text-align: left;font-weight: bold;font-size: 14px;padding: 5px;font-family: Arial, sans-serif; border: 1px solid #ddd!important;border-collapse:collapse;">Date</th>
                                                    <th style="width:20%;text-align: left;font-weight: bold;font-size: 14px;padding: 5px;font-family: Arial, sans-serif; border: 1px solid #ddd!important;border-collapse:collapse;">Amount</th>
                                                </tr>
                                                <tr>
                                                    <td style="font-size: 12px;padding: 5px;font-family: Arial, sans-serif;border: 1px solid #ddd!important;">RTGS</td>
                                                    <td style="font-size: 11px;padding: 5px;font-family: Arial, sans-serif;border: 1px solid #ddd!important;border-collapse:collapse;"><asp:Label ID="lblNo" runat="server" Text=""></asp:Label></td>
                                                    <td style="font-size: 11px;padding: 5px;font-family: Arial, sans-serif;border: 1px solid #ddd!important;border-collapse:collapse;"><asp:Label ID="lblDate" runat="server" Text=""></asp:Label></td>
                                                    <td style="font-size: 11px;padding: 5px;font-family: Arial, sans-serif;border: 1px solid #ddd!important;border-collapse:collapse;"><asp:Label ID="lblAmount" runat="server" Text=""></asp:Label></td>
                                                </tr>
                                                <tr>
                                                    <td style="font-size: 12px;padding: 5px;font-family: Arial, sans-serif;border: 1px solid #ddd!important;border-collapse:collapse;">Cheque</td>
                                                    <td style="font-size: 11px;padding: 5px;font-family: Arial, sans-serif;border: 1px solid #ddd!important;border-collapse:collapse;"><asp:Label ID="lblNo0" runat="server" Text=""></asp:Label></td>
                                                    <td style="font-size: 11px;padding: 5px;font-family: Arial, sans-serif;border: 1px solid #ddd!important;border-collapse:collapse;"><asp:Label ID="lblDate0" runat="server" Text=""></asp:Label></td>
                                                    <td style="font-size: 11px;padding: 5px;font-family: Arial, sans-serif;border: 1px solid #ddd!important;border-collapse:collapse;"><asp:Label ID="lblAmount0" runat="server" Text=""></asp:Label></td>
                                                </tr>
                                            </table>
                                        </td>
                                    </tr>
    </table>
    </div>

    Thanks

    Thursday, July 4, 2019 11:05 AM

All replies

  • User-158764254 posted

    in your other thread, you were asking about getting text to wrap in a table.

    possibly when working on that, you implemented one of the white-space: pre settings?

    pre is used to preserve the white-space.

    If you want text to automatically wrap in a table cell, and you also want any extra space to automatically collapse away, then i'd recommend using the style:

    white-space: normal;

    Thursday, July 4, 2019 9:24 PM
  • User839733648 posted

    Hi jsshivalikm,

    According to your description and code, I've made a test.

    Do you mean that you want to remove the space between each cell in the table?

    If so, you just could addd border-spacing: 0; to the second table.

            <div>
                <table id="myTbl" style="border-collapse: collapse; border-spacing: 0;">
                    <tr>
                        <th></th>
                    </tr>
    
                    <tr>
                        <td>
                            <table id="tblInner" style="margin: 0 auto; width: 75%;border-spacing: 0;">
                                <tr>
                                    <th style="width: 10%; text-align: left; font-weight: bold; font-size: 14px; padding: 5px; font-family: Arial, sans-serif; border: 1px solid #ddd!important; border-collapse: collapse;"></th>
                                    <th style="width: 35%; text-align: left; font-weight: bold; font-size: 14px; padding: 5px; font-family: Arial, sans-serif; border: 1px solid #ddd!important; border-collapse: collapse;">No</th>
                                    <th style="width: 35%; text-align: left; font-weight: bold; font-size: 14px; padding: 5px; font-family: Arial, sans-serif; border: 1px solid #ddd!important; border-collapse: collapse;">Date</th>
                                    <th style="width: 20%; text-align: left; font-weight: bold; font-size: 14px; padding: 5px; font-family: Arial, sans-serif; border: 1px solid #ddd!important; border-collapse: collapse;">Amount</th>
                                </tr>
                                <tr>
                                    <td style="font-size: 12px; padding: 5px; font-family: Arial, sans-serif; border: 1px solid #ddd!important;">RTGS</td>
                                    <td style="font-size: 11px; padding: 5px; font-family: Arial, sans-serif; border: 1px solid #ddd!important; border-collapse: collapse;">
                                        <asp:Label ID="lblNo" runat="server" Text=""></asp:Label></td>
                                    <td style="font-size: 11px; padding: 5px; font-family: Arial, sans-serif; border: 1px solid #ddd!important; border-collapse: collapse;">
                                        <asp:Label ID="lblDate" runat="server" Text=""></asp:Label></td>
                                    <td style="font-size: 11px; padding: 5px; font-family: Arial, sans-serif; border: 1px solid #ddd!important; border-collapse: collapse;">
                                        <asp:Label ID="lblAmount" runat="server" Text=""></asp:Label></td>
                                </tr>
                                <tr>
                                    <td style="font-size: 12px; padding: 5px; font-family: Arial, sans-serif; border: 1px solid #ddd!important; border-collapse: collapse;">Cheque</td>
                                    <td style="font-size: 11px; padding: 5px; font-family: Arial, sans-serif; border: 1px solid #ddd!important; border-collapse: collapse;">
                                        <asp:Label ID="lblNo0" runat="server" Text=""></asp:Label></td>
                                    <td style="font-size: 11px; padding: 5px; font-family: Arial, sans-serif; border: 1px solid #ddd!important; border-collapse: collapse;">
                                        <asp:Label ID="lblDate0" runat="server" Text=""></asp:Label></td>
                                    <td style="font-size: 11px; padding: 5px; font-family: Arial, sans-serif; border: 1px solid #ddd!important; border-collapse: collapse;">
                                        <asp:Label ID="lblAmount0" runat="server" Text=""></asp:Label></td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </div>

    Here is the comparison of the result:

    before modifying:

    after modifying:

    For more about the table's and border's style, you could refer to:

    https://www.w3schools.com/css/css_table.asp

    https://www.w3schools.com/cssref/pr_border-spacing.asp

    Best Regards,

    Jenifer

    Friday, July 5, 2019 2:24 AM
  • User-857013053 posted

    Hello, As per your question you just add 

    border-collapse: collapse; border-spacing: 0;
    above two css which use for spacing in table
    Thursday, October 31, 2019 4:22 AM