图片未填写表格

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>