Decrease bootstrap table width, colspan not working - html

Question

I am working with a bootstrap table, which contains in the right corner a table with rowspan = "2", then it has 2 rows, and then at the other end another rowspan = "2", looking like this:
The problem I'm having is that I can't "shrink" the width of the table where the image is, that is, the first column, I tried with col-1, with colspan = "1" but so far I can't find a solution, could you help me ?, the TOTAL WIDTH OF THE TABLE WHERE THE IMAGE IS, SHOULD BE THE SAME ROWSPAN = "1".
This is the code:
<tr>
<td rowspan="2" colspan="1">
<img src="IMAGE">
</td>
<td class="col-10">
PRODUCT NAME
</td>
<td rowspan="2" colspan="1">$PRICE</td>
</tr>
<tr>
<td>
<span>DESCRIPCION</strong></span>
</td>
</tr>

Answer 1

If you need a set width for image row, you can use width="...px" into <td width="..px">
I try make a example like this
table {
border-collapse: collapse;
}
table,
tr,
th,
td {
border: 1px solid #000;
}
th {
padding: 1ex;
background: #ccc;
}
td {
padding: 1ex;
}
.divide td {
border-top: 3px solid;
}
<table>
<tr>
<td rowspan="2" colspan="1" width="200px">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Stack_Overflow_icon.svg/768px-Stack_Overflow_icon.svg.png" width="50px">
</td>
<td class="col-10">
PRODUCT NAME
</td>
<td rowspan="2" colspan="1">$PRICE</td>
</tr>
<tr>
<td>
<span>DESCRIPCION</strong></span>
</td>
</tr>
</table>
<table>
<tr>
<td rowspan="2" colspan="1" width="150px">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Stack_Overflow_icon.svg/768px-Stack_Overflow_icon.svg.png" width="50px">
</td>
<td class="col-10">
PRODUCT NAME
</td>
<td rowspan="2" colspan="1">$PRICE</td>
</tr>
<tr>
<td>
<span>DESCRIPCION</strong></span>
</td>
</tr>
</table>
<table>
<tr>
<td rowspan="2" colspan="1" width="100px">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Stack_Overflow_icon.svg/768px-Stack_Overflow_icon.svg.png" width="50px">
</td>
<td class="col-10">
PRODUCT NAME
</td>
<td rowspan="2" colspan="1">$PRICE</td>
</tr>
<tr>
<td>
<span>DESCRIPCION</strong></span>
</td>
</tr>
</table>
<br>
<br>
<table>
<tr>
<th>head</th>
<th>title</th>
<th>title</th>
<th>title</th>
<th></th>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>content</td>
<td>content</td>
<td>content</td>
<td rowspan="2">white</td>
</tr>
<tr>
<td colspan="4">
lorem ipsum
</td>
</tr>
<tr class="divide">
<td>
<input type="checkbox">
</td>
<td>content</td>
<td>content</td>
<td>content</td>
<td rowspan="2">gray</td>
</tr>
<tr>
<td colspan="4">
lorem ipsum
</td>
</tr>
<tr class="divide">
<td>
<input type="checkbox">
</td>
<td>content</td>
<td>content</td>
<td>content</td>
<td>white</td>
</tr>
<tr class="divide">
<td>
<input type="checkbox">
</td>
<td>content</td>
<td>content</td>
<td>content</td>
<td rowspan="2">gray</td>
</tr>
<tr>
<td colspan="4">
lorem ipsum
</td>
</tr>
</table>