CODEWITHSUNDEEP
htmlcss
blankface
blankface

Reputation: 6347

Image height not matching with table height

I put an image of height 900px inside a table also of height 900px. But for some reason an added 5px height automatically gets added to the bottom of the table. Here is the code. Could someone explain why this is happening? Thanks.

<body style="margin: 0; padding: 0;">
   <table align="center" border="1" cellpadding="0" cellspacing="0" width="650" height="900" style="border-collapse: collapse;" style="border-top: 1px solid white;">
        <tr>
         <td><img src="dummy.png" alt="#" style="width: 296px; height:auto;"></td>
        </tr>
   </table>
</body>

Upvotes: 2

Views: 1288

Answers (2)

kasper Taeymans
kasper Taeymans

Reputation: 7026

An image is an inline element by default. Add the following style to your image and the white space will disappear.

img{display:block}

jsfiddle demo

Upvotes: 2

sohlweber
sohlweber

Reputation: 19

It's a known problem of tables and td

Set the image as background of the td

http://jsfiddle.net/F6Gds/30/

<body>
<table align="center" border="1" width="296" height="900">
<tr>
<td style="background-image:url(http://dummyimage.com/296x900/ccc/fff);">
</td>
</tr>
</table>
</body>

Upvotes: 0

Related Questions