Hey there, I'm currently working on creating a table to showcase some products but I am struggling with ensuring that the images display at the correct size. Any assistance on this matter would be greatly appreciated.
#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>I have attempted various methods such as setting the width and height manually, however, nothing seems to work. Here is the fiddle https://jsfiddle.net/w5rvdzk1/1/