2017-10-17 70 views
0

我正尝试使用表格构建此时事通讯模板,并且遇到了表格的这种非常奇怪的行为。有点它有围绕tr或这东西1px边界。 我在列内使用.png图片,我读到这可能会导致问题,但我无法修复它。表格中的Strage 1px白色边框

<body style="background-color: rgb(209,213,214)"> 
 
    <p>&nbsp;</p> 
 

 
    <table align="center" cellpadding="1" cellspacing="1" style="background-color:rgb(255, 255, 255);width:650px;"> 
 
    <tbody> 
 
     <tr style="background-color: rgb(209,213,214);"> 
 
     <td colspan="5" style="padding: 0px; vertical-align: bottom;"><img alt="" src="https://sendy.antreprenordigital.ro/uploads/1508217161.png" style="width: 650px; height: 66px;" /></td> 
 
     </tr> 
 
     <tr> 
 
     <td style="width: 600px;">&nbsp; &nbsp; &nbsp;&nbsp;<img alt="" src="https://sendy.antreprenordigital.ro/uploads/1508216084.png" style="width: 170px; height: 80px;" /></td> 
 
     <td style="width: 30px;"><img alt="" src="https://sendy.antreprenordigital.ro/uploads/1508216108.png" style="width: 25px; height: 25px;" /></td> 
 
     <td style="width: 30px;"><img alt="" src="https://sendy.antreprenordigital.ro/uploads/1508216125.png" style="width: 25px; height: 25px;" /></td> 
 
     <td style="width: 30px;"><img alt="" src="https://sendy.antreprenordigital.ro/uploads/1508216140.png" style="width: 25px; height: 25px;" /></td> 
 
     <td style="width: 50px;"><img alt="" src="https://sendy.antreprenordigital.ro/uploads/1508216152.png" style="width: 25px; height: 25px;" /></td> 
 
     </tr> 
 
     <tr> 
 
     <td colspan="5" style="height: 30px; vertical-align: middle; width: 615px; text-align: center;"><img alt="" src="https://sendy.antreprenordigital.ro/uploads/1508218847.jpg" style="width: 601px; height: 15px;" /></td> 
 
     </tr> 
 
     <tr> 
 
     <td colspan="5" style="vertical-align: top; background-color: rgb(209, 213, 214); padding: 0px;"><img alt="" src="https://sendy.antreprenordigital.ro/uploads/1508217471.png" style="width: 650px; height: 75px;" /></td> 
 
     </tr> 
 
     <tr> 
 
     <td colspan="5" style="height: 30px; vertical-align: top; padding-left: 10px;"><strong><span style="font-size:28px;"><span style="font-family:arial;">&nbsp;</span><span style="font-family:georgia;"> Cora Trade Center</span></span></strong></td> 
 
     </tr> 
 
     <tr> 
 
     <td colspan="5" style="height: 30px; vertical-align: middle; padding-left: 20px; text-align: center;"><img alt="" src="https://sendy.antreprenordigital.ro/uploads/1508218869.jpg" style="width: 601px; height: 15px;" /></td> 
 
     </tr> 
 
     <tr 5="" style="background-color: rgb(209,213,214);&gt; 
 
\t \t \t &lt;td colspan="> 
 
     </tr> 
 
    </tbody> 
 
    </table>

回答

2

如果你谈论的1px白线然后设置,

border="0" cellspacing="0" cellpadding="0"0

然后,

<html> 
 
<head> 
 
\t <title></title> 
 
</head> 
 
<body style="background-color: rgb(209,213,214)"> 
 
<p>&nbsp;</p> 
 

 
<table align="center" border="0" cellspacing="0" cellpadding="0" style="background-color:rgb(255, 255, 255);width:650px;"> 
 
\t <tbody> 
 
\t \t <tr style="background-color: rgb(209,213,214);"> 
 
\t \t \t <td colspan="5" style="padding: 0px; vertical-align: bottom;"><img alt="" src="https://sendy.antreprenordigital.ro/uploads/1508217161.png" style="width: 650px; height: 66px;" /></td> 
 
\t \t </tr> 
 
\t \t <tr> 
 
\t \t \t <td style="width: 600px;">&nbsp; &nbsp; &nbsp;&nbsp;<img alt="" src="https://sendy.antreprenordigital.ro/uploads/1508216084.png" style="width: 170px; height: 80px;" /></td> 
 
\t \t \t <td style="width: 30px;"><img alt="" src="https://sendy.antreprenordigital.ro/uploads/1508216108.png" style="width: 25px; height: 25px;" /></td> 
 
\t \t \t <td style="width: 30px;"><img alt="" src="https://sendy.antreprenordigital.ro/uploads/1508216125.png" style="width: 25px; height: 25px;" /></td> 
 
\t \t \t <td style="width: 30px;"><img alt="" src="https://sendy.antreprenordigital.ro/uploads/1508216140.png" style="width: 25px; height: 25px;" /></td> 
 
\t \t \t <td style="width: 50px;"><img alt="" src="https://sendy.antreprenordigital.ro/uploads/1508216152.png" style="width: 25px; height: 25px;" /></td> 
 
\t \t </tr> 
 
\t \t <tr> 
 
\t \t \t <td colspan="5" style="height: 30px; vertical-align: middle; width: 615px; text-align: center;"><img alt="" src="https://sendy.antreprenordigital.ro/uploads/1508218847.jpg" style="width: 601px; height: 15px;" /></td> 
 
\t \t </tr> 
 
\t \t <tr> 
 
\t \t \t <td colspan="5" style="vertical-align: top; background-color: rgb(209, 213, 214); padding: 0px;"><img alt="" src="https://sendy.antreprenordigital.ro/uploads/1508217471.png" style="width: 650px; height: 75px;" /></td> 
 
\t \t </tr> 
 
\t \t <tr> 
 
\t \t \t <td colspan="5" style="height: 30px; vertical-align: top; padding-left: 10px;"><strong><span style="font-size:28px;"><span style="font-family:arial;">&nbsp;</span><span style="font-family:georgia;"> Cora Trade Center</span></span></strong></td> 
 
\t \t </tr> 
 
\t \t <tr> 
 
\t \t \t <td colspan="5" style="height: 30px; vertical-align: middle; padding-left: 20px; text-align: center;"><img alt="" src="https://sendy.antreprenordigital.ro/uploads/1508218869.jpg" style="width: 601px; height: 15px;" /></td> 
 
\t \t </tr> 
 
\t \t <tr 5="" style="background-color: rgb(209,213,214);&gt; 
 
\t \t \t &lt;td colspan="> 
 
\t \t </tr> 
 
\t </tbody> 
 
</table>

此外,如果你想,如果你想删除的空间以及去除图像之间的空间,然后,设置imgblock

img { 
 
    display: block; 
 
}
<html> 
 

 
<head> 
 
    <title></title> 
 
</head> 
 

 
<body style="background-color: rgb(209,213,214)"> 
 
    <p>&nbsp;</p> 
 

 
    <table align="center" cellpadding="0" cellspacing="0" style="background-color:rgb(255, 255, 255);width:650px;"> 
 
    <tbody> 
 
     <tr style="background-color: rgb(209,213,214);"> 
 
     <td colspan="5" style="padding: 0px; vertical-align: bottom;"><img alt="" src="https://sendy.antreprenordigital.ro/uploads/1508217161.png" style="width: 650px; height: 66px;" /></td> 
 
     </tr> 
 
     <tr> 
 
     <td style="width: 600px;">&nbsp; &nbsp; &nbsp;&nbsp;<img alt="" src="https://sendy.antreprenordigital.ro/uploads/1508216084.png" style="width: 170px; height: 80px;" /></td> 
 
     <td style="width: 30px;"><img alt="" src="https://sendy.antreprenordigital.ro/uploads/1508216108.png" style="width: 25px; height: 25px;" /></td> 
 
     <td style="width: 30px;"><img alt="" src="https://sendy.antreprenordigital.ro/uploads/1508216125.png" style="width: 25px; height: 25px;" /></td> 
 
     <td style="width: 30px;"><img alt="" src="https://sendy.antreprenordigital.ro/uploads/1508216140.png" style="width: 25px; height: 25px;" /></td> 
 
     <td style="width: 50px;"><img alt="" src="https://sendy.antreprenordigital.ro/uploads/1508216152.png" style="width: 25px; height: 25px;" /></td> 
 
     </tr> 
 
     <tr> 
 
     <td colspan="5" style="height: 30px; vertical-align: middle; width: 615px; text-align: center;"><img alt="" src="https://sendy.antreprenordigital.ro/uploads/1508218847.jpg" style="width: 601px; height: 15px;" /></td> 
 
     </tr> 
 
     <tr> 
 
     <td colspan="5" style="vertical-align: top; background-color: rgb(209, 213, 214); padding: 0px;"><img alt="" src="https://sendy.antreprenordigital.ro/uploads/1508217471.png" style="width: 650px; height: 75px;" /></td> 
 
     </tr> 
 
     <tr> 
 
     <td colspan="5" style="height: 30px; vertical-align: top; padding-left: 10px;"><strong><span style="font-size:28px;"><span style="font-family:arial;">&nbsp;</span><span style="font-family:georgia;"> Cora Trade Center</span></span></strong></td> 
 
     </tr> 
 
     <tr> 
 
     <td colspan="5" style="height: 30px; vertical-align: middle; padding-left: 20px; text-align: center;"><img alt="" src="https://sendy.antreprenordigital.ro/uploads/1508218869.jpg" style="width: 601px; height: 15px;" /></td> 
 
     </tr> 
 
     <tr 5="" style="background-color: rgb(209,213,214);&gt; 
 
\t \t \t &lt;td colspan="> 
 
     </tr> 
 
    </tbody> 
 
    </table>

1

您需要与border-collapse: collapse;

table{ 
    border-collapse: collapse; 
} 
应用默认的HTML表