删除桌子之间的间距

时间:2018-07-10 17:26:47

标签: html css

您好,我正在遍历堆栈溢出中发布的所有解决方案,以了解如何消除表之间的间距,我已经尝试了所有解决方案,但似乎仍然无法正常工作。

我尝试将cellpacing和border设置为0,我尝试了边框折叠,尝试将padding设置为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>
<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>

2 个答案:

答案 0 :(得分:4)

您正在观看的间隔由ul(边距)而不是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>

答案 1 :(得分:1)

您在表格单元格和两个表格之间看到的空格不是由于表格间距,而是<ul>标记中的默认边距。将每个<ul>替换为<ul style="margin: 0px">,间距将消失。要获得更优雅的解决方案,请进入外部样式表,并将所有<ul>标签设置为无边距。

表格之间间距的另一个原因是您在第二张表格中放置的图像。图像足够高,可以更改线条高度,从而为您提供看到的空间。删除图片或将其放置在<ul>标签之外,以便在保留图片的同时删除空间。

如果您需要查看我可以提供的修复程序的实际HTML,希望对您有所帮助,但是如果没有修复的话,似乎很容易修复。