Search code examples
htmlhtml-email

Unable to remove spaces between table column (td)

Unable to remove space between td between numeric digit (td) and the background red td

enter image description here

https://jsfiddle.net/297zgLon/

I have tried using suggested css way of doing it i.e.

CSS

border-collapse:collapse;border-spacing:0px;

HTML

<table style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;border-spacing: 0;border-collapse: collapse;width:100%;text-align: left;border: 0px;border-collapse:collapse;border-spacing:0px;" width="100%" align="left" border="0" cellpadding="0" cellspacing="0"> 
                                              <tbody> 
                                                <tr align="left"> 
                                                  <td align="right" width="43" class="sectionCount" style="width: 43px; display: inline-block; font-size: 24px;color: #177fff; text-align: right; font-weight: 600; font-family:'Open Sans', sans-serif, Arial;"> 1.</td> 
                                                  <td align="left" width="20" style="width: 20px;font-size: 14px;background:red"> &nbsp;</td> 
                                                  <td align="left"> <a href="http://mylink" target="_blank" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;display: inline-block;font-size: 18px;font-weight: 600; font-family:'Open Sans', sans-serif, Arial;color: #177fff;text-decoration: none"> TEST CASE 1 </a> </td> 
                                                </tr> 
                                                <tr align="left"> 
                                                  <td colspan="3" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;font-family: 'Open Sans', sans-serif, Arial;border-collapse: collapse;line-height:26px;font-size:26px;" height="26px" class="spacerMobile8">&nbsp;</td> 
                                                </tr> 
                                                <tr align="left"> 
                                                  <td align="right" width="43" class="sectionCount" style="width: 43px; display: inline-block; font-size: 24px; font-family:'Open Sans', sans-serif, Arial; color: #5d636a; text-align: right; font-weight: 600"> 2.</td> 
                                                  <td align="left" width="20" style="width: 20px;font-size: 14px;;background:red"> &nbsp;</td> 
                                                  <td style=" color: #5d636a;font-size: 18px;font-family:'Open Sans', sans-serif, Arial;font-weight: 600;"> Test case 2 tools</td> 
                                                </tr> 
                                                <tr align="left"> 
                                                  <td colspan="3" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;font-family: 'Open Sans', sans-serif, Arial;border-collapse: collapse;line-height:26px;font-size:26px;" height="26px">&nbsp;</td> 
                                                </tr> 
                                                <tr align="left"> 
                                                  <td align="right" width="43" class="sectionCount" style="width: 43px; display: inline-block; font-size: 24px;color: #5d636a; text-align: right;font-family:'Open Sans', sans-serif, Arial;font-weight: 600;"> 3.</td> 
                                                  <td align="left" width="20" style="width: 20px;font-size: 14px;;background:red"> &nbsp;</td> 
                                                  <td style="font-size: 18px;font-weight: 600; font-family:'Open Sans', sans-serif, Arial;color: #5d636a;"> Test case 3 </td> 
                                                </tr> 
                                              </tbody> 
                                            </table>

There should be no space between 1. and red background td(column)

Solution

  • removed display: inline-block; on first <td>

    <table style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;border-spacing: 0;border-collapse: collapse;width:100%;text-align: left;border: 0px;border-collapse:collapse;border-spacing:0px;" width="100%" align="left" border="0" cellpadding="0" cellspacing="0"> 
    <tbody> 
        <tr align="left"> 
        <td align="right" width="43" class="sectionCount" style="width: 43px; font-size: 24px;color: #177fff; text-align: right; font-weight: 600; font-family:'Open Sans', sans-serif, Arial;"> 1.</td> 
        <td align="left" width="20" style="width: 20px;font-size: 14px;background:red"> &nbsp;</td> 
        <td align="left"> <a href="http://mylink" target="_blank" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;display: inline-block;font-size: 18px;font-weight: 600; font-family:'Open Sans', sans-serif, Arial;color: #177fff;text-decoration: none"> TEST CASE 1 </a> </td> 
        </tr> 
        <tr align="left"> 
        <td colspan="3" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;font-family: 'Open Sans', sans-serif, Arial;border-collapse: collapse;line-height:26px;font-size:26px;" height="26px" class="spacerMobile8">&nbsp;</td> 
        </tr> 
        <tr align="left"> 
        <td align="right" width="43" class="sectionCount" style="width: 43px; font-size: 24px; font-family:'Open Sans', sans-serif, Arial; color: #5d636a; text-align: right; font-weight: 600"> 2.</td> 
        <td align="left" width="20" style="width: 20px;font-size: 14px;;background:red"> &nbsp;</td> 
        <td style=" color: #5d636a;font-size: 18px;font-family:'Open Sans', sans-serif, Arial;font-weight: 600;"> Test case 2 tools</td> 
        </tr> 
        <tr align="left"> 
        <td colspan="3" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;font-family: 'Open Sans', sans-serif, Arial;border-collapse: collapse;line-height:26px;font-size:26px;" height="26px">&nbsp;</td> 
        </tr> 
        <tr align="left"> 
        <td align="right" width="43" class="sectionCount" style="width: 43px; font-size: 24px;color: #5d636a; text-align: right;font-family:'Open Sans', sans-serif, Arial;font-weight: 600;"> 3.</td> 
        <td align="left" width="20" style="width: 20px;font-size: 14px;;background:red"> &nbsp;</td> 
        <td style="font-size: 18px;font-weight: 600; font-family:'Open Sans', sans-serif, Arial;color: #5d636a;"> Test case 3 </td> 
        </tr> 
    </tbody> 
</table>