如何删除我的 html 表格单元格中的白线？

Question

我正在制作一个包含图像的 5x5 表格，但在某些正方形上，我在单元格底部看到一条白线。 （请注意，我放置了金色背景，以便您更容易注意到线条）

问题的图像 https://i.imgur.com/un6gNhd.png

我尝试添加“垂直对齐：底部；” , cellpadding="0" cellspacing="0"，但还是同样的问题。

css:

<style>
table {
  width: 90%;
}
td {
  width: 18%;
  position: relative;
border: 2px solid black;
}
td:after {
  content: '';
  display: block;
  margin-top: 100%;
}
td .content {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
background-color: gold;
}
img {
  width: 100%;
display: block;
}
</style>

html:

<table align="center">
  <tr>
    <td><div class="content"><img src="https://via.placeholder.com/90"></div></td>
    <td><div class="content"><img src="https://via.placeholder.com/90"></div></td>
    <td><div class="content"><img src="https://via.placeholder.com/90"></div></td>
<td><div class="content"><img src="https://via.placeholder.com/90"></div></td>
<td><div class="content"><img src="https://via.placeholder.com/90"></div></td>
  </tr>
  <tr>
    <td><div class="content"><img src="https://via.placeholder.com/120"></div></td>
    <td><div class="content"><img src="https://via.placeholder.com/120"></div></td>
    <td><div class="content"><img src="https://via.placeholder.com/120"></div></td>
<td><div class="content"><img src="https://via.placeholder.com/90"></div></td>
<td><div class="content"><img src="https://via.placeholder.com/120"></div></td>
  </tr>
  <tr>
    <td><div class="content"><img src="https://via.placeholder.com/120"></div></td>
    <td><div class="content"><img src="https://via.placeholder.com/120"></div></td>
    <td><div class="content"><img src="https://via.placeholder.com/120"></div></td>
<td><div class="content"><img src="https://via.placeholder.com/90"></div></td>
<td><div class="content"><img src="https://via.placeholder.com/120"></div></td>
  </tr>
<tr>
    <td><div class="content"><img src="https://via.placeholder.com/120"></div></td>
    <td><div class="content"><img src="https://via.placeholder.com/120"></div></td>
    <td><div class="content"><img src="https://via.placeholder.com/120"></div></td>
<td><div class="content"><img src="https://via.placeholder.com/90"></div></td>
<td><div class="content"><img src="https://via.placeholder.com/120"></div></td>
  </tr>
<tr>
    <td><div class="content"><img src="https://via.placeholder.com/120"></div></td>
    <td><div class="content"><img src="https://via.placeholder.com/120"></div></td>
    <td><div class="content"><img src="https://via.placeholder.com/120"></div></td>
<td><div class="content"><img src="https://via.placeholder.com/90"></div></td>
<td><div class="content"><img src="https://via.placeholder.com/120"></div></td>
  </tr>
</table>

我希望去掉单元格中的线条。

Answer 1

如果您将height: 100%; 添加到您的图像 css 中，金色区域将被覆盖。

我还将overflow: hidden; 添加到.content 区域，以防止较大的图像与新的 100% 修复重叠。

所有更改都在下面小提琴的 css 中标记为“以下是新的”。

table {
  width: 90%;
  /* Below is new */
  border-spacing: 2px;  
}

td {
  width: 18%;
  position: relative;
  border: 2px solid black;
}

td:after {
  content: '';
  display: block;
  margin-top: 100%;
}

td .content {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: gold;
  /* Below is new */
  overflow: hidden;
}

img {
  width: 100%;
  display: block;
  /* Below is new */
  height: 100%;
}

<table align="center">
  <tr>
    <td>
      <div class="content"><img src="https://via.placeholder.com/90"></div>
    </td>
    <td>
      <div class="content"><img src="https://via.placeholder.com/90"></div>
    </td>
    <td>
      <div class="content"><img src="https://via.placeholder.com/90"></div>
    </td>
    <td>
      <div class="content"><img src="https://via.placeholder.com/90"></div>
    </td>
    <td>
      <div class="content"><img src="https://via.placeholder.com/90"></div>
    </td>
  </tr>
  <tr>
    <td>
      <div class="content"><img src="https://via.placeholder.com/120"></div>
    </td>
    <td>
      <div class="content"><img src="https://via.placeholder.com/120"></div>
    </td>
    <td>
      <div class="content"><img src="https://via.placeholder.com/120"></div>
    </td>
    <td>
      <div class="content"><img src="https://via.placeholder.com/90"></div>
    </td>
    <td>
      <div class="content"><img src="https://via.placeholder.com/120"></div>
    </td>
  </tr>
  <tr>
    <td>
      <div class="content"><img src="https://via.placeholder.com/120"></div>
    </td>
    <td>
      <div class="content"><img src="https://via.placeholder.com/120"></div>
    </td>
    <td>
      <div class="content"><img src="https://via.placeholder.com/120"></div>
    </td>
    <td>
      <div class="content"><img src="https://via.placeholder.com/90"></div>
    </td>
    <td>
      <div class="content"><img src="https://via.placeholder.com/120"></div>
    </td>
  </tr>
  <tr>
    <td>
      <div class="content"><img src="https://via.placeholder.com/120"></div>
    </td>
    <td>
      <div class="content"><img src="https://via.placeholder.com/120"></div>
    </td>
    <td>
      <div class="content"><img src="https://via.placeholder.com/120"></div>
    </td>
    <td>
      <div class="content"><img src="https://via.placeholder.com/90"></div>
    </td>
    <td>
      <div class="content"><img src="https://via.placeholder.com/120"></div>
    </td>
  </tr>
  <tr>
    <td>
      <div class="content"><img src="https://via.placeholder.com/120"></div>
    </td>
    <td>
      <div class="content"><img src="https://via.placeholder.com/120"></div>
    </td>
    <td>
      <div class="content"><img src="https://via.placeholder.com/120"></div>
    </td>
    <td>
      <div class="content"><img src="https://via.placeholder.com/90"></div>
    </td>
    <td>
      <div class="content"><img src="https://via.placeholder.com/120"></div>
    </td>
  </tr>
</table>