CODEWITHSUNDEEP
htmlcss
Ricky
Ricky

Reputation: 777

Removing the spacing between tables

Hello I am going through all of the solutions posted on stack overflow on how to remove the spacing between tables and I've tried all of them and still can't seem to get it working.

I've tried setting the cellpacing and border to 0, I've tried border collapse, I've tried setting padding to 0. Can anyone take a look and let me know where I am going wrong?

<table cellpadding="0" cellspacing="0" width="100%" style="background-color: transparent; min-width: 100%; " class="stylingblock-content-wrapper">
  <tr>
    <td style="padding: 15px 20px 0px; " border="0" cellspacing="0" cellpadding="0" class="stylingblock-content-wrapper camarker-inner" border-collapse: collapse; border-spacing: 0;><div style="text-align: justify;"> <span style="color:#081E3F;  font-family: Effra, Montserrat, sans-serif; font-size: 16px; line-height : 1.5;">Who said holidays should be saved for the summer months? Come explore Greece and the Eastern Mediterranean with Insight Vacations during the autumn, winter and spring&nbsp;and we will connect you to the local people and history with our unique Insight Experiences.&nbsp;</span><br>
        &nbsp;</div>
      <ul>
        <li style="color:#081E3F;  font-family: Effra, Montserrat, sans-serif; font-size: 16px; line-height : 1.5;"> <span style="color: rgb(8, 30, 63); font-family: Effra, Montserrat, sans-serif; text-align: justify;"><b>Discover Egypt with your own Egyptologist </b>as you marvel at the great pyramids of Giza and the ancient temples and tombs along the River Nile.</span></li>
      </ul>
      <div>
        <ul>
          <li style="color:#081E3F;  font-family: Effra, Montserrat, sans-serif; font-size: 16px; line-height : 1.5;"> <span style="color: rgb(8, 30, 63); font-family: Effra, Montserrat, sans-serif; text-align: justify;"><b>Join a local chef</b> and <b>savour the regional specialties</b> in a fun, exciting introduction to Greek cooking.</span></li>
        </ul>
        <div>
          <ul>
            <li style="color:#081E3F;  font-family: Effra, Montserrat, sans-serif; font-size: 16px; line-height : 1.5;"> <span style="color: rgb(8, 30, 63); font-family: Effra, Montserrat, sans-serif; text-align: justify;">Venture further into the East and gain an insight into the lives of the Ottoman Sultans during a <b>private tour of the fabulous Topkapi Palace</b> in Istanbul.</span>&nbsp;</li>
          </ul>
        </div>
      </div></td>
  </tr>
</table>
<table cellpadding="0" cellspacing="0" width="100%" style="min-width: 100%;" class="stylingblock-content-wrapper" border="0" cellpadding="0" cellspacing="0">
<tr>
  <td border="0" cellspacing="0" cellpadding="0" class="stylingblock-content-wrapper camarker-inner" border-collapse: collapse; border-spacing: 0;><table border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td align="left" style="padding-left: 20px" border="0" cellpadding="0" cellspacing="0"><div class="imgpop">
            <ul>
              <li style="color:#081E3F;  font-family: Effra, Montserrat, sans-serif; font-size: 16px; line-height : 1.5;"> <a style="color:#081E3F;  font-family: Effra, Montserrat, sans-serif; font-size: 16px; line-height : 1.5;">Get an even better value than before, with our <b>best deal in years</b>. See trips marked with our Special Anniversary Pricing Icon, which designate our<b> special anniversary pricing</b> for off-season travel.</a></li>
            </ul>
          </div></td>
        <td align="right" class="social" style="padding-right: 20px"><img alt="Special Anniversary Pricing" data-assetid="9745" height="100" src="http://image.em.insightvacations.com/lib/fe941570706c037f71/m/4/6750243f-be71-492c-91b5-8f161e978574.png"></td>
        <td align="right" width="0"></td>
      </tr>
    </table></td>
</tr>
</table>

Upvotes: 1

Views: 315

Answers (2)

enbermudas
enbermudas

Reputation: 1615

The spacing you're watching is made by the ul (margin), not the table

ul { margin: 0; }
                                              <table cellpadding="0" cellspacing="0" width="100%" style="background-color: transparent; min-width: 100%; " class="stylingblock-content-wrapper">
                                                <tr>
                                                  <td style="padding: 15px 20px 0px; " border="0" cellspacing="0" cellpadding="0" class="stylingblock-content-wrapper camarker-inner" border-collapse: collapse; border-spacing: 0;><div style="text-align: justify;"> <span style="color:#081E3F;  font-family: Effra, Montserrat, sans-serif; font-size: 16px; line-height : 1.5;">Who said holidays should be saved for the summer months? Come explore Greece and the Eastern Mediterranean with Insight Vacations during the autumn, winter and spring&nbsp;and we will connect you to the local people and history with our unique Insight Experiences.&nbsp;</span><br>
                                                      &nbsp;</div>
                                                    <ul>
                                                      <li style="color:#081E3F;  font-family: Effra, Montserrat, sans-serif; font-size: 16px; line-height : 1.5;"> <span style="color: rgb(8, 30, 63); font-family: Effra, Montserrat, sans-serif; text-align: justify;"><b>Discover Egypt with your own Egyptologist </b>as you marvel at the great pyramids of Giza and the ancient temples and tombs along the River Nile.</span></li>
                                                    </ul>
                                                    <div>
                                                      <ul>
                                                        <li style="color:#081E3F;  font-family: Effra, Montserrat, sans-serif; font-size: 16px; line-height : 1.5;"> <span style="color: rgb(8, 30, 63); font-family: Effra, Montserrat, sans-serif; text-align: justify;"><b>Join a local chef</b> and <b>savour the regional specialties</b> in a fun, exciting introduction to Greek cooking.</span></li>
                                                      </ul>
                                                      <div>
                                                        <ul>
                                                          <li style="color:#081E3F;  font-family: Effra, Montserrat, sans-serif; font-size: 16px; line-height : 1.5;"> <span style="color: rgb(8, 30, 63); font-family: Effra, Montserrat, sans-serif; text-align: justify;">Venture further into the East and gain an insight into the lives of the Ottoman Sultans during a <b>private tour of the fabulous Topkapi Palace</b> in Istanbul.</span>&nbsp;</li>
                                                        </ul>
                                                      </div>
                                                    </div></td>
                                                </tr>
                                              </table></td>
                                          </tr>
                                        </table></td>
                                    </tr>
                                  </table></td>
                              </tr>
                            </table>



                            <table cellpadding="0" cellspacing="0" width="100%" style="min-width: 100%;" class="stylingblock-content-wrapper" border="0" cellpadding="0" cellspacing="0">
                              <tr>
                                <td border="0" cellspacing="0" cellpadding="0" class="stylingblock-content-wrapper camarker-inner" border-collapse: collapse; border-spacing: 0;><table border="0" cellpadding="0" cellspacing="0">
                                    <tr>
                                      <td align="left" style="padding-left: 20px" border="0" cellpadding="0" cellspacing="0"><div class="imgpop">
                                          <ul>
                                            <li style="color:#081E3F;  font-family: Effra, Montserrat, sans-serif; font-size: 16px; line-height : 1.5;"> <a style="color:#081E3F;  font-family: Effra, Montserrat, sans-serif; font-size: 16px; line-height : 1.5;">Get an even better value than before, with our <b>best deal in years</b>. See trips marked with our Special Anniversary Pricing Icon, which designate our<b> special anniversary pricing</b> for off-season travel.</a></li>
                                          </ul>
                                        </div></td>
                                      <td align="right" class="social" style="padding-right: 20px"><img alt="Special Anniversary Pricing" data-assetid="9745" height="100" src="http://image.em.insightvacations.com/lib/fe941570706c037f71/m/4/6750243f-be71-492c-91b5-8f161e978574.png"></td>
                                      <td align="right" width="0"></td>
                                    </tr>
                                  </table>

Upvotes: 4

Cubemaster
Cubemaster

Reputation: 527

The spaces you are seeing between the table cells and the two tables is not due to the table spacing, but the default margins in your <ul> tags. Replace every <ul> with <ul style="margin: 0px"> and the spacing will go away. For a more elegant solution, go into an external style sheet and set all <ul> tags to have no margins.

Another cause of the spacing between the tables is the image you have placed in the second table. The image is tall enough that it changes the line height, giving you the space you are seeing. Remove the picture or place it outside of the <ul> tag in order to remove the space while keeping the image.

I hope this helps, if you need to see some actual HTML of the fix I can provide, but it seems easy enough to fix without it.

Upvotes: 1

Related Questions