html - 图片未填入表格

Question

您好，我有一张 table ，我正在尝试创建以显示产品，但我无法让图像以适当的大小显示，我们将不胜感激。

#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>

无论我尝试过手动设置宽度或高度，它都无法正确显示。这是 fiddle https://jsfiddle.net/w5rvdzk1/1/

Answer 1

你的 CSS

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

选择 <img>在表中，因为它实际上是 <td> 的第一个 child 因为它比 .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>