CODEWITHSUNDEEP
htmlcsshtml-table
Ovidiu G
Ovidiu G

Reputation: 1273

Strage 1px white border in table

I'm trying to build this newsletter template using tables and I came across this very weird behavior of the table. Somewhat it has this 1px border around the tr or something. I'm using a .png image inside the column and I read that this might cause the problem but I couldn't fix it.

<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;
			&lt;td colspan=">
      </tr>
    </tbody>
  </table>

Upvotes: 0

Views: 51

Answers (2)

Hash
Hash

Reputation: 8030

If your talking about the 1px white line then set your,

border="0" cellspacing="0" cellpadding="0" of table to 0 .

Then,

<html>
<head>
	<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;">
	<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;
			&lt;td colspan=">
		</tr>
	</tbody>
</table>

Further, If you want to remove the space between the image then, Set img as block if you want to remove that space as well.

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;
			&lt;td colspan=">
      </tr>
    </tbody>
  </table>

Upvotes: 2

Vincent1989
Vincent1989

Reputation: 1657

You need to apply your default html table with border-collapse: collapse;

table{
    border-collapse: collapse;
}

Upvotes: 1

Related Questions