Как удалить белую линию в ячейке моей HTML-таблицы? - PullRequest
Новая
       2

Как удалить белую линию в ячейке моей HTML-таблицы?

1 голос
/ 29 мая 2019

Я делаю таблицу 5х5, которая будет содержать изображения, хотя на некоторых квадратах я получаю белую линию в нижней части ячейки. (обратите внимание, что я поставил золотой фон, чтобы вы могли легче заметить линию)

изображение проблемы https://i.imgur.com/un6gNhd.png

Я попытался добавить "vertical-align: bottom;" , 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>

Я ожидаю избавиться от линий в клетках.

1 Ответ

0 голосов
/ 29 мая 2019

Если вы добавите 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>
...