Question

很简单，我在两个td元素之间显示黑线，我不知道为什么。

我已经相应地尝试了valign="bottom"和valign="top"，试图在差距中移动td但是td尺寸会有所不同。

＆＃13;

<table bgcolor="#0a1219" border="0" cellpadding="0" cellspacing="0" style="max-width:692px;background-color:#0a1219;" width="692">
  <tbody>
    <tr>
      <!------------->
      <!-- IMAGE 1 -->
      <td align="center" style="font-family:'Open Sans',Helvetica,Arial,sans-serif;;padding-left:20px; max-height: 286px; max-width:332px;" valign="bottom">
        <table border="0" cellpadding="0" cellspacing="0" width="100%">
          <tbody>
            <tr>
              <!-- IMAGE -->
              <td align="right" style="font-family:'Arial',Helvetica,sans-serif;">
                <a href="#" target="_blank">
                  <img alt="Image-1" src="https://cdn2.hubspot.net/hubfs/3055391/Inbound/CPD%202017/Email/Newsletter%20%20-%20Customers/image-1.png" style="display:block;border:0px;font-family:Helvetica,Arial,sans-serif;color:#ffffff" height="286">
                </a>
              </td>
            </tr>
          </tbody>
        </table>
      </td>
      <!------------->
      <!-- IMAGE 2 -->
      <td align="left" style="font-family:Arial,Helvetica,sans-serif;padding-right:20px; max-height: 286px; max-width:332px;" valign="bottom">
        <table border="0" cellpadding="0" cellspacing="0" width="100%">
          <tbody>
            <!--ROW 1 IMAGE -->
            <tr>
              <td align="center" style="font-family:'Open Sans',Helvetica,Arial,sans-serif; background-color:#00adf2;">

                <img alt="Speech marks" src="https://cdn2.hubspot.net/hubfs/3055391/Inbound/CPD%202017/Email/Newsletter%20%20-%20Customers/speech.png" style="display:block;border:0px;font-family:Arial, Helvetica,sans-serif;color:#ffffff; padding-top: 3px;" width="310">
              </td>
            </tr>
            <!--ROW 1 TEXT -->
            <tr>
              <td align="center" style="background-color:#00adf2; font-family:Arial;font-size:14px;line-height:20px;color:#fff; text-align: center;">
                Faceate volorunt uta quo moditas
                <br> et labo. Comnima iorehent hit est
                <br> am vit elit volores cimpossime
                <br> serchit, oditiis rehenis volor
                <br> sequisqui ut late cus. Faceate
                <br> volorunt uta quo moditas et labo.
                <br> Comnima ioreh.
              </td>
            </tr>
            <tr>
              <!--ROW 3 LINE -->
              <td align="center" style="font-family:'Open Sans',Helvetica,Arial,sans-serif;padding: 22px;background-color:#00adf2;vertical-align:top;">
                <!-- NESTED TABLE -->
                <table border="0" cellpadding="0" cellspacing="0">
                  <tbody>
                    <tr>
                      <td align="center" style="font-family:'Open Sans',Helvetica,Arial,sans-serif; width: 100%;" width="100%">
                        <!-- TABLE FOR LINE -->
                        <table border="0" cellpadding="0" cellspacing="0" width="100%">
                          <tbody>
                            <tr>
                              <td align="center" bgcolor="#fff" height="3" style="height:4px;width:50px;font-size:0px;" width="50"></td>
                            </tr>
                          </tbody>
                        </table>
                        <td style="padding-bottom:18px;"></td>
                        <!-- TABLE FOR LINE END -->
                      </td>
                      <!-- LINE END -->
                    </tr>
                  </tbody>
                </table>
                <!-- NESTED TABLE END -->
              </td>
            </tr>
          </tbody>
        </table>
      </td>
      <!-- FIRST ROW CLOSE -->
    </tr>
    <!------------->
    <!-- IMAGE 3 -->
    <!------------->
    <tr>
      <!------------->
      <td align="right" style="font-family:Arial,Helvetica,sans-serif;padding-left:20px; max-height: 286px;">
        <table border="0" cellpadding="0" cellspacing="0" width="100%" style="height:288px; max-width:332px;" valign="top">
          <tbody>
            <!--ROW 2 IMAGE -->
            <tr>
              <td align="center" style="font-family:'Arial',Helvetica,sans-serif; background-color:#282929; text-transform: uppercase; font-size: 16px; font-weight: bold; color: #fff; padding-top:30px;">
              </td>
            </tr>
            <!--ROW 2 TEXT -->
            <tr>
              <td align="center" style="background-color:#282929; font-family:Arial;font-size:14px;line-height:20px;color:#fff; text-align: center;">
                Faceate volorunt uta quo moditas
                <br> et labo. Comnima iorehent hit est
                <br> am vit elit volores cimpossime
                <br> serchit, oditiis rehenis volor
                <br> sequisqui ut late cus.
              </td>
            </tr>
            <tr>
              <!--ROW 3 LINE -->
              <td align="center" style="font-family:'Open Sans',Helvetica,Arial,sans-serif;padding: 22px;background-color:#282929;vertical-align:top; min-height: 286px;">
                <!-- NESTED TABLE -->
                <table border="0" cellpadding="0" cellspacing="0">
                  <tbody>
                    <tr>
                      <td align="center" style="font-family:'Open Sans',Helvetica,Arial,sans-serif; width: 100%;" width="100%">
                        <tr>
                          <td align="center" bgcolor="#282929" style="font-family:Helvetica,Arial,sans-serif; border-radius:5px; background-color:#282929; width:137px;height:42px;">
                            <a href="#" style="font-family:Arial,sans-serif; color:#ffffff; text-decoration:none; display:inline-block; padding:10px 0; border-radius:5px;
																background-color:transparent; font-size:14px; font-weight:bold; text-align:center; line-height:20px; text-transform:uppercase; letter-spacing: 1px; width:137px; 
																border: 2px solid #fff;" target="_blank">
																	  Read more
																</a>
                          </td>
                        </tr>

                        <td style="padding-bottom:17px;"></td>
                        <!-- TABLE FOR LINE END -->
                      </td>
                      <!-- LINE END -->
                    </tr>
                  </tbody>
                </table>
                <!-- NESTED TABLE END -->
              </td>
            </tr>
          </tbody>
        </table>
      </td>
      <!------------->
      <!-- IMAGE 4 -->
      <td align="left" style="font-family:'Open Sans',Helvetica,Arial,sans-serif;;padding-right:20px; max-height: 286px; max-width:332px;" valign="bottom">
        <table border="0" cellpadding="0" cellspacing="0" width="100%">
          <tbody>
            <tr>
              <!-- IMAGE -->
              <td align="left" style="font-family:'Arial',Helvetica,sans-serif;">
                <a href="#" target="_blank">
                  <img alt="Image-2" src="https://cdn2.hubspot.net/hubfs/3055391/Inbound/CPD%202017/Email/Newsletter%20%20-%20Customers/img.png" style="display:block;border:0px;font-family:Helvetica,Arial,sans-serif;color:#ffffff;" height="286">
                </a>
              </td>
            </tr>
          </tbody>
        </table>
      </td>
      <!-------->
    </tr>
  </tbody>
</table>

＆＃13;

差距在第2栏，为什么会发生这种情况？

Answer 1

这是因为您指定为height的图片286。但左侧的桌子高度为288px。同时制作图像288

Answer 2

一个可以解决的问题是给Image-2（现场的女性）以下css提升它。我自己检查了图像，它似乎没有任何奇怪的隐形黑线。我尝试关闭父td元素上的所有填充。这并不理想，但确实可以实现您所寻找的目标。

position: relative;
top: -2px;

Answer 3

不是您的表格布局问题的解决方案，而是如何在没有表格的情况下执行此操作。

See on Codepen

.layout {
  width: 692px;
  background: #2c2d2d;
  font-family: Arial;
}

.layout .row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.layout .row>div {
  flex-basis: 50%;
  height: 286px;
  padding: 0 30px;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  text-align: center;
  background-position: center center;
  background-size: cover;
}

.layout .row>div.bg-blue {
  background: #00acf2;
}

.layout .row>div img.bigQuote {
  margin-top: -15px;
}

.layout .row>div p {
  margin: 0;
}

.layout .row>div span.caret {
  display: block;
  height: 5px;
  width: 30px;
  background: #fff;
}

.layout .row>div span.button {
  display: inline-block;
  padding: 10px;
  border: #fff solid 1px;
  border-radius: 5px;
}

<div class="layout">
  <div class="row">
    <div class="left" style="background-image:url(https://cdn2.hubspot.net/hubfs/3055391/Inbound/CPD%202017/Email/Newsletter%20%20-%20Customers/image-1.png);"></div>
    <div class="right bg-blue"><img class="bigQuote" src="https://cdn2.hubspot.net/hubfs/3055391/Inbound/CPD%202017/Email/Newsletter%20%20-%20Customers/speech.png" />
      <p>Faceate volorunt uta quo moditas et labo. Comnima iorehent hit est am vit elit volores cimpossime serchit, oditiis rehenis volor sequisqui ut late cus. Faceate volorunt uta quo moditas et labo. Comnima ioreh.</p><span class="caret"></span>
    </div>
  </div>
  <div class="row">
    <div class="left">
      <p>Faceate volorunt uta quo moditas et labo. Comnima iorehent hit est am vit elit volores cimpossime serchit, oditiis rehenis volor sequisqui ut late cus.</p><span class="button">Read more</span>
    </div>
    <div class="right" style="background-image:url(https://cdn2.hubspot.net/hubfs/3055391/Inbound/CPD%202017/Email/Newsletter%20%20-%20Customers/img.png);"></div>
  </div>
</div>

Answer 4

在height评论后td内的表格中将更改为286px，并在最后一个表格中将valign更改为top图像并在注释行

之后跟随

<table bgcolor="#0a1219" border="0" cellpadding="0" cellspacing="0" style="max-width:692px;background-color:#0a1219;" width="692">
  <tbody>
    <tr>
      <!------------->
      <!-- IMAGE 1 -->
      <td align="center" style="font-family:'Open Sans',Helvetica,Arial,sans-serif;;padding-left:20px; max-height: 286px; max-width:332px;" valign="bottom">
        <table border="0" cellpadding="0" cellspacing="0" width="100%">
          <tbody>
            <tr>
              <!-- IMAGE -->
              <td align="right" style="font-family:'Arial',Helvetica,sans-serif;">
                <a href="#" target="_blank">
                  <img alt="Image-1" src="https://cdn2.hubspot.net/hubfs/3055391/Inbound/CPD%202017/Email/Newsletter%20%20-%20Customers/image-1.png" style="display:block;border:0px;font-family:Helvetica,Arial,sans-serif;color:#ffffff" height="286">
                </a>
              </td>
            </tr>
          </tbody>
        </table>
      </td>
      <!------------->
      <!-- IMAGE 2 -->
      <td align="left" style="font-family:Arial,Helvetica,sans-serif;padding-right:20px; max-height: 286px; max-width:332px;" valign="bottom">
        <table border="0" cellpadding="0" cellspacing="0" width="100%">
          <tbody>
            <!--ROW 1 IMAGE -->
            <tr>
              <td align="center" style="font-family:'Open Sans',Helvetica,Arial,sans-serif; background-color:#00adf2;">

                <img alt="Speech marks" src="https://cdn2.hubspot.net/hubfs/3055391/Inbound/CPD%202017/Email/Newsletter%20%20-%20Customers/speech.png" style="display:block;border:0px;font-family:Arial, Helvetica,sans-serif;color:#ffffff; padding-top: 3px;" width="310">
              </td>
            </tr>
            <!--ROW 1 TEXT -->
            <tr>
              <td align="center" style="background-color:#00adf2; font-family:Arial;font-size:14px;line-height:20px;color:#fff; text-align: center;">
                Faceate volorunt uta quo moditas
                <br> et labo. Comnima iorehent hit est
                <br> am vit elit volores cimpossime
                <br> serchit, oditiis rehenis volor
                <br> sequisqui ut late cus. Faceate
                <br> volorunt uta quo moditas et labo.
                <br> Comnima ioreh.
              </td>
            </tr>
            <tr>
              <!--ROW 3 LINE -->
              <td align="center" style="font-family:'Open Sans',Helvetica,Arial,sans-serif;padding: 22px;background-color:#00adf2;vertical-align:top;">
                <!-- NESTED TABLE -->
                <table border="0" cellpadding="0" cellspacing="0">
                  <tbody>
                    <tr>
                      <td align="center" style="font-family:'Open Sans',Helvetica,Arial,sans-serif; width: 100%;" width="100%">
                        <!-- TABLE FOR LINE -->
                        <table border="0" cellpadding="0" cellspacing="0" width="100%">
                          <tbody>
                            <tr>
                              <td align="center" bgcolor="#fff" height="3" style="height:4px;width:50px;font-size:0px;" width="50"></td>
                            </tr>
                          </tbody>
                        </table>
                        <td style="padding-bottom:18px;"></td>
                        <!-- TABLE FOR LINE END -->
                      </td>
                      <!-- LINE END -->
                    </tr>
                  </tbody>
                </table>
                <!-- NESTED TABLE END -->
              </td>
            </tr>
          </tbody>
        </table>
      </td>
      <!-- FIRST ROW CLOSE -->
    </tr>
    <!------------->
    <!-- IMAGE 3 -->
    <!------------->
    <tr>
      <!------------->
      <td align="right" style="font-family:Arial,Helvetica,sans-serif;padding-left:20px; max-height: 286px;">
        <table border="0" cellpadding="0" cellspacing="0" width="100%" style="height:286px; max-width:332px;" valign="top">
          <tbody>
            <!--ROW 2 IMAGE -->
            <tr>
              <td align="center" style="font-family:'Arial',Helvetica,sans-serif; background-color:#282929; text-transform: uppercase; font-size: 16px; font-weight: bold; color: #fff; padding-top:30px;">
              </td>
            </tr>
            <!--ROW 2 TEXT -->
            <tr>
              <td align="center" style="background-color:#282929; font-family:Arial;font-size:14px;line-height:20px;color:#fff; text-align: center;">
                Faceate volorunt uta quo moditas
                <br> et labo. Comnima iorehent hit est
                <br> am vit elit volores cimpossime
                <br> serchit, oditiis rehenis volor
                <br> sequisqui ut late cus.
              </td>
            </tr>
            <tr>
              <!--ROW 3 LINE -->
              <td align="center" style="font-family:'Open Sans',Helvetica,Arial,sans-serif;padding: 22px;background-color:#282929;vertical-align:top; min-height: 286px;">
                <!-- NESTED TABLE -->
                <table border="0" cellpadding="0" cellspacing="0">
                  <tbody>
                    <tr>
                      <td align="center" style="font-family:'Open Sans',Helvetica,Arial,sans-serif; width: 100%;" width="100%">
                        <tr>
                          <td align="center" bgcolor="#282929" style="font-family:Helvetica,Arial,sans-serif; border-radius:5px; background-color:#282929; width:137px;height:42px;">
                            <a href="#" style="font-family:Arial,sans-serif; color:#ffffff; text-decoration:none; display:inline-block; padding:10px 0; border-radius:5px;
																background-color:transparent; font-size:14px; font-weight:bold; text-align:center; line-height:20px; text-transform:uppercase; letter-spacing: 1px; width:137px; 
																border: 2px solid #fff;" target="_blank">
																	  Read more
																</a>
                          </td>
                        </tr>

                        <td style="padding-bottom:17px;"></td>
                        <!-- TABLE FOR LINE END -->
                      </td>
                      <!-- LINE END -->
                    </tr>
                  </tbody>
                </table>
                <!-- NESTED TABLE END -->
              </td>
            </tr>
          </tbody>
        </table>
      </td>
      <!------------->
      <!-- IMAGE 4 -->
      <td align="left" style="font-family:'Open Sans',Helvetica,Arial,sans-serif;;padding-right:20px; max-height: 286px; max-width:332px;" valign="top">
        <table border="0" cellpadding="0" cellspacing="0" width="100%">
          <tbody>
            <tr>
              <!-- IMAGE -->
              <td align="left" style="font-family:'Arial',Helvetica,sans-serif;">
                <a href="#" target="_blank">
                  <img alt="Image-2" src="https://cdn2.hubspot.net/hubfs/3055391/Inbound/CPD%202017/Email/Newsletter%20%20-%20Customers/img.png" style="display:block;border:0px;font-family:Helvetica,Arial,sans-serif;color:#ffffff;" height="286">
                </a>
              </td>
            </tr>
          </tbody>
        </table>
      </td>
      <!-------->
    </tr>
  </tbody>
</table>

P.S。：尽量不使用内联样式，使用起来非常繁琐。

表td＆＃39; s之间存在未知差距

4 个答案: