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

我有一个表格数据，我使用内联样式，因为我想让html在电子邮件中工作。但似乎表格数据是在图像的位置添加填充，我尝试使用border-collapse：collapse和所有内容，但仍然会在表格数据的底部显示3或4个px填充。下面是供参考的代码：添加奇怪填充的HTML表格数据

<!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>

来源

2014-06-20 yoyodunno

你可以有内联CSS –

您有需要修正的不匹配的标签。也请尝试制作一个jsFiddle.net示例，以便我们可以看到您看到的内容。 – j08691

[删除图像下方的空白]可能的副本（http://stackoverflow.com/questions/7774814/remove-white-space-below-image） – JakeGould

你的图片应该有内联CSS为display: block;。因此，像这样：

<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;"/>

来源

2014-06-20 02:56:10 JakeGould

这工作。现在图像底部有一条1px左右的线条，但可能来自图像本身。 – yoyodunno

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

回答

相关问题