Question

我有一个包含一些表数据的表，我使用内联样式，因为我希望html在电子邮件中工作。但似乎表数据是在图像所在的位置添加填充，我尝试使用border-collapse：collapse，以及所有内容，但仍有少量3或4 px填充到表数据中的图像底部。以下是供参考的代码：

<!DOCTYPE html>
<html lang="en">

  <body>
  <table style="background: #E6E6E6; ">
    <tr><td style="padding-left:18%;">
     <!--one main column in a nested table-->
    <table >

  <tr><td><p style="text-align: center; font-size: 11px; color: grey;">There’s never been a better time to use the Hulu Plus App on your PS3 »   |   View as Web page </p></td></tr>
  <tr><td><img src="pics/psnetworkheader.png" /></td></tr>
  <tr style="background-image: url('pics/topGreyBack.png'); background-repeat:no-repeat;"><td style="padding-left:35px;">


  <table><tr  style="padding-top:35px;"><!--one row, two td columns and nested table-->
  <td  style="padding-right: 60px; padding-top: 40px; width:30%;" ><!--left column in grey block-->
  <a href="#"><img src="pics/huluImg.png" style="box-shadow: 0 0 6px #eee;"/></a>
  <p style="color: #F2F2F2; margin-top: 20px; font-size: 12px; ">The Hulu Plus App on the PS3 features an updated experience with a new layout and intuitive controls. Watch Fall Premieres, stream current hit TV shows
and classic series all from your PS3.</p>

    <p style="color: #F2F2F2; margin-top: 20px; font-size:12px;">Not a member?  Get a <b>FREE MONTH</b>
of unlimited instant streaming. 
<br/>Your promo code is: <b>XXXXXXXXX</b>
</p>
    <a href="#">&rsaquo; Try 1 Month Free</a>
    <p style="color: #F2F2F2; margin-top: 9px; font-size:9px;">Expires 10/20/12. You must be a new subscriber to receive this offer. </p>
  </td>

  <td >
    <img src="pics/tvImg.png"/>
  </td>
  </tr></table> <!--end row in grey block-->


  </td></tr><!--end grey block-->

  <table style="margin-left:2px; width: 720px;">
  <tr style="padding-top:35px; "><td style="width:50%;padding-left: 35px; padding-right: 20px;">

  <h3>Hulu Plus, its TV on your terms. </h3>
  <p><small>With the Hulu Plus app you can watch your favorite shows right on your PS3. From current seasons to the classics, it’s all yours for only $7.99 a month.</small></p>
  <ul style="font-size: 13px;">
    <li>Easily scroll through popular shows and movies, clips, movie trailers, and personalized recommendations.</li>
    <li>Use the new enhanced search function and Shows You Watch feature which highlights the content you regularly enjoy so you can jump straight to the latest episode.</li>
  </ul>

  </td><!--end first td-->

  <td style="padding-left: 55px; padding-top: 40px;">
    <table style="border-spacing:10px; ">

    <tr>
    <td style="padding:0px;-webkit-box-shadow: 2px 4px 30px -7px rgba(0,0,0,0.75);
-moz-box-shadow: 2px 4px 30px -7px rgba(0,0,0,0.75);
box-shadow: 2px 4px 30px -7px rgba(0,0,0,0.75); ">
    <img src="pics/mofa.png"/>
    </td>
    <td style="padding:0px;-webkit-box-shadow: 2px 4px 30px -7px rgba(0,0,0,0.75);
-moz-box-shadow: 2px 4px 30px -7px rgba(0,0,0,0.75);
box-shadow: 2px 4px 30px -7px rgba(0,0,0,0.75);">
    <img src="pics/grimm.png"/>
    </td>
    </tr>

    <tr >
    <td style="-webkit-box-shadow: 2px 4px 30px -7px rgba(0,0,0,0.75);
-moz-box-shadow: 2px 4px 30px -7px rgba(0,0,0,0.75);
box-shadow: 2px 4px 30px -7px rgba(0,0,0,0.75);">
    <img src="pics/snl.png"/>
    </td>
    <td style="-webkit-box-shadow: 2px 4px 30px -7px rgba(0,0,0,0.75);
-moz-box-shadow: 2px 4px 30px -7px rgba(0,0,0,0.75);
box-shadow: 2px 4px 30px -7px rgba(0,0,0,0.75);">
    <img src="pics/americandad.png"/>
    </td>
    </tr>

    <tr >
    <td style="-webkit-box-shadow: 2px 4px 30px -7px rgba(0,0,0,0.75);
-moz-box-shadow: 2px 4px 30px -7px rgba(0,0,0,0.75);
box-shadow: 2px 4px 30px -7px rgba(0,0,0,0.75);">
    <img src="pics/community.png"/>
    </td>
    <td style="-webkit-box-shadow: 2px 4px 30px -7px rgba(0,0,0,0.75);
-moz-box-shadow: 2px 4px 30px -7px rgba(0,0,0,0.75);
box-shadow: 2px 4px 30px -7px rgba(0,0,0,0.75);">
    <img src="pics/familyguy.png"/>
    </td>
    </tr>

    <tr >
    <td >
    <img src="pics/theoffice.png"/>
    </td>
    <td >
    <img src="pics/naruto.png"/>
    </td>
    </tr>

    <tr >
    <td >
    <img src="pics/newgirl.png"/>
    </td>
    <td >
    <img src="pics/once.png"/>
    </td>
    </tr>


  </td></tr>
   <!--end white block row-->
  </table><!-- end white block-->
  <!--one big column-->

  </table>`enter code here`
  </tr></td>
  </table> <!--container-->



  </body>
</html>

Answer 1

您的图片应具有display: block;的内联CSS。所以像这样：

<img src="pics/huluImg.png" style="box-shadow: 0 0 6px #eee;"/>

将是这样：

<img src="pics/huluImg.png" style="box-shadow: 0 0 6px #eee; display: block;"/>

HTML表格数据添加了奇怪的填充

1 个答案: