Изображение не заполняется в таблице

Question

Привет, у меня есть таблица, которую я пытаюсь создать для отображения продуктов, но у меня возникают проблемы с отображением изображения в правильном размере. Любая помощь будет признательна.

#tbldesktops {
  width: 100%;
  height: 100%;
  margin-top: 50px;
}

#tbldesktops tr :nth-child(3) {
  width: 60%;
}

#tbldesktops tr :nth-child(1) {
  width: 15%;
}

#tbldesktops,
td {
  text-align: left;
  border: 1px solid black;
  border-collapse: collapse;
  background-color: #fde981;
  font-size: 12pt;
  height: 8vh;
}

#tbldesktops th {
  color: #fde981;
  background-color: #4f41dc;
  border: 1px solid black;
  border-collapse: collapse;
}

.productimg {
  height: auto;
  width: 100%;
}

<table id="tbldesktops">
  <tr>
    <th class="pctype" colspan="3">Desktop Computers</th>
  </tr>
  <tr>
    <th>Image</th>
    <th>Model</th>
    <th>Description</th>
  </tr>
  <tr>
    <td><img class="productimg" src="https://via.placeholder.com/200.jpg" alt="product name"></td>
    <td>Product</td>
    <td>Description</td>
  </tr>
</table>

независимо от того, что я пытался установить ширину или высоту вручную, он не будет отображаться правильно.вот скрипка https://jsfiddle.net/w5rvdzk1/1/

Answer 1

Ваш CSS

#tbldesktops tr :nth-child(1) {
  width: 15%;
}

выбирает <img> в таблице, так как на самом деле он является первым потомком <td>, и поскольку он имеет более высокую специфичность, чем .productimg, правила дляэтот выборщик действует.

Измените его на

#tbldesktops tr > :nth-child(1) {
  width: 15%;
}

, чтобы заставить его работать

#tbldesktops {
  width: 100%;
  height: 100%;
  margin-top: 50px;
}

#tbldesktops tr > :nth-child(3) {
  width: 60%;
}

#tbldesktops tr > :nth-child(1) {
  width: 15%;
}

#tbldesktops,
td {
  text-align: left;
  border: 1px solid black;
  border-collapse: collapse;
  background-color: #fde981;
  font-size: 12pt;
  height: 8vh;
}

#tbldesktops th {
  color: #fde981;
  background-color: #4f41dc;
  border: 1px solid black;
  border-collapse: collapse;
}

.productimg {
  height: auto;
  width: 100%;
}

<table id="tbldesktops">
  <tr>
    <th class="pctype" colspan="3">Desktop Computers</th>
  </tr>
  <tr>
    <th>Image</th>
    <th>Model</th>
    <th>Description</th>
  </tr>
  <tr>
    <td><img class="productimg" src="https://via.placeholder.com/200.jpg" alt="product name"></td>
    <td>Product</td>
    <td>Description</td>
  </tr>
</table>