当图像在td标签中时，图像中有额外的边框，如何解决这个问题

Question

我正在设计一个小网页，td中有图像，但有图像的单元格不会相互合并。

网页

如图所示，图像之间存在边界。

我在css中尝试过，但这对图像不起作用

table, 
th, 
td {
border: none;
border-collapse: collapse;
}

<table width="100%">
<tr>
<td><img src="https://via.placeholder.com/150x150" width="100%"></td>
<td><img src="https://via.placeholder.com/150x150" width="100%"></td>
<td><img src="https://via.placeholder.com/150x150" width="100%"></td>
<td><img src="https://via.placeholder.com/150x150" width="100%"></td>
</tr>
<tr class="TC">
<td>10/05/2018
<br><br>
Night Laser Show
<br><br>
We are happy to announce this special lasere show
</td>
<td>10/05/2018
<br><br>
Night Laser Show
<br><br>
We are happy to announce this special lasere show
</td>
<td>10/05/2018
<br><br>
Night Laser Show
<br><br>
We are happy to announce this special lasere show
</td>
<td>10/05/2018
<br><br>
Night Laser Show
<br><br>
We are happy to announce this special lasere show
</td>
</tr>
</table>

请回答如何解决此问题？

Answer 1

添加了填充：0；至td

table, 
th, 
td {
border: none;
border-collapse: collapse;
padding: 0;
}

<table width="100%">
<tr>
<td><img src="https://via.placeholder.com/150x150" width="100%"></td>
<td><img src="https://via.placeholder.com/150x150" width="100%"></td>
<td><img src="https://via.placeholder.com/150x150" width="100%"></td>
<td><img src="https://via.placeholder.com/150x150" width="100%"></td>
</tr>
<tr class="TC">
<td>10/05/2018
<br><br>
Night Laser Show
<br><br>
We are happy to announce this special lasere show
</td>
<td>10/05/2018
<br><br>
Night Laser Show
<br><br>
We are happy to announce this special lasere show
</td>
<td>10/05/2018
<br><br>
Night Laser Show
<br><br>
We are happy to announce this special lasere show
</td>
<td>10/05/2018
<br><br>
Night Laser Show
<br><br>
We are happy to announce this special lasere show
</td>
</tr>
</table>

Answer 2

在我的回答中，改变的想法是我只将border-collapse: collapse;移动到表中，然后将th和td填充设置为0

/* Just Use This CSS */
/* The line you have is related to the padding of the th / td */
table {
border-collapse: collapse;
}

th, td {
padding: 0;
}

<table width="100%">
<tr>
<td>
<img src="https://via.placeholder.com/150x150" width="100%">
</td>
<td>
<img src="https://via.placeholder.com/150x150" width="100%">
</td>
<td>
<img src="https://via.placeholder.com/150x150" width="100%">
</td>
<td>
<img src="https://via.placeholder.com/150x150" width="100%">
</td>
</tr>
<tr class="TC">
<td>10/05/2018
<br>
<br>
Night Laser Show
<br>
<br>
We are happy to announce this special lasere show
</td>
<td>
10/05/2018
<br>
<br>
Night Laser Show
<br>
<br>
We are happy to announce this special lasere show
</td>
<td>
10/05/2018
<br>
<br>
Night Laser Show
<br>
<br>
We are happy to announce this special lasere show
</td>
<td>
10/05/2018
<br>
<br>
Night Laser Show
<br>
<br>
We are happy to announce this special lasere show
</td>
</tr>
</table>

Answer 3

将padding:0;样式添加到th和td