Почему фоновое изображение не растягивает ячейку таблицы? Как растянуть?

Question

Необходимо вставить изображение

в ячейку таблицы, чтобы получилось так

А получается так

ВНИМАНИЕ! Подбирать размер нельзя. Страница должна быть резиновой. Не обращайте внимание на отсутствие некоторых стилей и размеров в сравнении с целевым вариантом. Если добавлять таким образом <td><img src="https://i.stack.imgur.com/mIp8b.gif"></td> получится белая полоса под картинкой. Её быть не должно.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

table {
  border-top: 1px solid #B0B0B0;
  border-right: 1px solid #4D4D4D;
  border-left: 1px solid #B0B0B0;
  border-bottom: 1px solid #4D4D4D;
}

td {
  border-top: 1px solid #4D4D4D;
  border-right: 1px solid #B0B0B0;
  border-left: 1px solid #4D4D4D;
  border-bottom: 1px solid #B0B0B0;
  background-repeat: no-repeat;
}

.one {
  color: green;
  background-color: yellow;
}

.two {
  color: #0000FF;
  background-color: #FF0000;
}

.three {
  color: black;
  background-color: #808080;
}

.bord {
  border-top: 5px solid #B0B0B0;
  border-right: 5px solid #4D4D4D;
  border-left: 5px solid #B0B0B0;
  border-bottom: 5px solid #4D4D4D;
  margin: 2px;
}

<table cellspacing="2">
  <tr align="center">
    <td class="one">От 6 до 20 мм</td>
    <td class="two">
      <div class="bord">Просверлим всё</div>
    </td>
  </tr>
  <tr>
    <td align="center" valign="center" class="three">ПЕРФОРАТОР</td>
    <td background="https://i.stack.imgur.com/mIp8b.gif"></td>
  </tr>
</table>

Answer 1

В css добавить img { display: block;} Изображение вставить между тегами td. Решение уже было в англоязычной версии: https://stackoverflow.com/questions/14625949/there-is-always-a-little-space-under-images-inside-a-table

БЛОГ НА HUSL

Почему фоновое изображение не растягивает ячейку таблицы? Как растянуть?

Ответы (1 шт):