custom table td witdh

Question

The problem :

HTML

<div class="visible-sm visible-xs " id="aatablet" style="padding-left: 0px; padding-bottom:10px; padding-top:10px; text-align: center;">
        <table border="1">
            <tr>
                <td colspan="4" class="item_title">
                    <div style="padding-top:5px;">
                        Available at:
                    </div>
                </td>
            </tr>
            <tr>
                <td >
                    <img src="img/amazon-lrg.gif" alt="amazon" />

                </td>
                <td>
                    <img src="img/ebay-lrg.gif" alt="ebay" />
                </td>
                <td >
                    <img src="img/tomatomill-lrg.gif" alt="tomatomill" />
                </td>
                <td ><img src="img/BBG-lrg.gif" alt="BBG" />
                </td>  
                </tr>  
                <tr>    
                    <td >
                 </td>            
                <td>
                    <img src="img/sears-lrg.gif" alt="sears" />
                </td>                 
                <td >
                    <img src="img/healthcraft-home-logo.gif" alt="Healthcraft" title="Healthcraft" />
                </td>
                 <td >
                     <img src="img/paradisecozycabins.jpg" alt="paradisecozycabins" title="paradisecozycabins" />

                 </td>
            </tr>
        </table>
    </div>

CSS

 #aatablet > table {
margin:0 auto;
}

Framework:bootstrap 3.4.

I want to make td of tomato logo width 100px not 178px like Helt Craft and td of Paradise(last td) 50px not 150px like BIGGAME. Can someone help me ?I'm not good at making custom tables.Is it possible to do it whit only CSS? Ty all.

Answer 1

You can give inline:block for td and give separate widths. Target each td using :nth-of-type

td{
  display: inline-block;
}

tr:first-child td:nth-of-type(3){
  width: 100px;
}
tr:last-child td:nth-of-type(4){
  width: 50px;
}