CODEWITHSUNDEEP
htmlcsshtml-table
user6751084
user6751084

Reputation:

HTML table: remove space between two tr

How can I remove space between the 1st tr and 2nd tr? I have to use image and can't use border property.

<table>
  <tr>
    <td align="left" height="40" style="padding-left:30px;padding-bottom:0px;border-collapse: collapse;">

      <table cellspacing="0" cellpadding="0" border="0" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
        <tbody>
          <tr>
            <td valign="middle" height="40" align="center" style="color: #FFFFFF;display: block;padding-left: 55px;padding-right: 55px;background-color:#EE163A;">
              <span class="event_register" style="color: #FFFFFF;text-align: center;text-decoration: none;-webkit-text-size-adjust: none;font-size: 14px;line-height: 40px;display: inline-block;text-transform:uppercase;font-family: 'proxima_novasemibold', Arial, sans-serif;"
              target="_blank">Day 1</span>
            </td>
          </tr>
        </tbody>
      </table>
    </td>
  </tr>

  <tr>
    <td style="mso-line-height-rule: exactly; line-height:0px;border-collapse: collapse;">
      <img src="http://www.hubilo.in/images_for_links/arrow.png" width="10" height="10" style="padding-left:100px; vertical-align:top; " valign="top" align="top">
    </td>
  </tr>
</table>

Upvotes: 0

Views: 5209

Answers (3)

z0mBi3
z0mBi3

Reputation: 1544

You forgot to add cellspacing="0" and cellpadding="0" to the top most table. Also there is a padding in td which needs to be set to 0. If you want the down arrow to stick to the top div then you would have to give margin-top:-2px as there is an space in the image itself

<table cellspacing="0" cellpadding="0">
  <tr>
    <td align="left" height="40" style="padding-left:30px;padding-bottom:0px;border-collapse: collapse;">

      <table cellspacing="0" cellpadding="0" border="0" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
        <tbody>
          <tr>
            <td valign="middle" height="40" align="center" style="color: #FFFFFF;display: block;padding-left: 55px;padding-right: 55px;background-color:#EE163A;">
              <span class="event_register" style="color: #FFFFFF;text-align: center;text-decoration: none;-webkit-text-size-adjust: none;font-size: 14px;line-height: 40px;display: inline-block;text-transform:uppercase;font-family: 'proxima_novasemibold', Arial, sans-serif;"
              target="_blank">Day 1</span>
            </td>
          </tr>
        </tbody>
      </table>
    </td>
  </tr>

  <tr>
    <td style="mso-line-height-rule: exactly; line-height:0px;border-collapse: collapse; padding: 0;">
      
      <span style="padding-left:100px; vertical-align:top; background:url(http://www.hubilo.in/images_for_links/arrow.png) 100px -2px no-repeat;    background-size: contain; width: 10px; height: 10px; display: block;" valign="top" align="top">
    </td>
  </tr>
</table>

Upvotes: 1

Editor
Editor

Reputation: 632

<table cellspacing="0" cellpadding="0">
  <tr>
    <td align="left" height="40" style="padding-left:30px;padding-bottom:0px;border-collapse: collapse;">

      <table cellspacing="0" cellpadding="0" border="0" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
        <tbody>
          <tr>
            <td valign="middle" height="40" align="center" style="color: #FFFFFF;display: block;padding-left: 55px;padding-right: 55px;background-color:#EE163A;">
              <span class="event_register" style="color: #FFFFFF;text-align: center;text-decoration: none;-webkit-text-size-adjust: none;font-size: 14px;line-height: 40px;display: inline-block;text-transform:uppercase;font-family: 'proxima_novasemibold', Arial, sans-serif;"
              target="_blank">Day 1</span>
            </td>
          </tr>
        </tbody>
      </table>
    </td>
  </tr>

  <tr>
    <td style="mso-line-height-rule: exactly; line-height:0px;border-collapse: collapse; padding: 0;">
      <img width="10" align="top" height="10" valign="top" style="padding-left: 100px; vertical-align: top; margin-top: -2px;" src="http://www.hubilo.in/images_for_links/arrow.png">
    </td>
  </tr>
</table>

Upvotes: 0

Ankur Pathak
Ankur Pathak

Reputation: 39

use <table cellpadding="0" cellspacing="0"> for the top level table as well

additionally the image your using is also having blank are above arrow ho need to crop that..

Upvotes: 0

Related Questions