Why is the width of my <td> block bigger than 50px. If I specifically tell it to be max-width and width = 50px

Question

This is my table:

 <table style="width: 84%; min-width: 330px; margin-left: 8%; margin-top: 20px; margin-right: 8%;" cellpadding="0" cellspacing="0"> <tr> <td style="width: 50px; border-top: solid 1px #dedede; background: yellow; max-width: 50px;"> <img style="width: 50px; background: red" src="https://s3.amazonaws.com/co.psngr.gopublic.staging/media/product/1/fbb3f543c5c349b09b59bf19a1e6a6d9.png"> </td> <td colspan="1" style="border-top: solid 1px #dedede; padding: 20px 10px; text-align: left; word-wrap: break-word; font-family: 'Lato', sans-serif; font-size: 16px;color: #333333; width: 50%;"> <b><span style="color: #24b646">3 x </span>Psngr Beacon</b><br/> <span style="font-size: 14px; color: #899ba7;">Bluetooth 4 (BLE) USB iBeacon\™</span> </td> <td style=" width: 100px; text-align: right; border-top: solid 1px #dedede; padding: 20px 0px; font-weight: bold; color: #24b646; font-family: 'Lato', sans-serif; font-size: 18px; letter-spacing: 0.2px; word-wrap: break-word"> € 74.85 </td> </tr> </table> 

As you can see. the table has a picture that is 50px inside, colored with red. But then the is twice as big as the picture, even thought the same width is set to both:

When i inspect, element style says 50px; But if I highlight it, it says 109x77

I am using this for django templates, so I cannot use @mediaQueries, or classes. I just wanted to let you guys know in advance regarding this

Answer 1

I think that happens because you set the middle td's width to 50%, so it'll change the first td's width to take up the remaining space of the table row. Setting the width of the second td to 100% should fix that.

Answer 2

This was being caused by some styles on your other two td elements. Since you had padding-top and/or padding-bottom on the other two, then created extra vertical space that you don't want on the first one. Also, you originally had the width of the second td set to 50%: that pulled the first td to be wider than 50px.

I took those things out in the snippet below as a starting point - you can make adjustments to the other 2 td in different ways so that the first one doesn't have the undesired effects.

 <table style="width: 84%; min-width: 330px; margin-left: 8%; margin-top: 20px; margin-right: 8%;" cellpadding="0" cellspacing="0"> <tr> <td style="width: 50px; border-top: solid 1px #dedede; background: yellow; max-width: 50px;"> <img style="width: 50px; background: red" src="https://s3.amazonaws.com/co.psngr.gopublic.staging/media/product/1/fbb3f543c5c349b09b59bf19a1e6a6d9.png"> </td> <td style="border-top: solid 1px #dedede; text-align: left; word-wrap: break-word; font-family: 'Lato', sans-serif; font-size: 16px;color: #333333; padding: 0 40px"> <b><span style="color: #24b646">3 x </span>Psngr Beacon</b><br/> <span style="font-size: 14px; color: #899ba7;">Bluetooth 4 (BLE) USB iBeacon\™</span> </td> <td style=" text-align: right; border-top: solid 1px #dedede; font-weight: bold; color: #24b646; font-family: 'Lato', sans-serif; font-size: 18px; letter-spacing: 0.2px; word-wrap: break-word"> € 74.85 </td> </tr> </table>