How to make an image fill its table cell FULLY

Question

I read many forums and tried the solution there, but none of them worked. I still have a little gap between all of my images. Here is the code:

<table id="Table"> <tr> <td id="td1"><h2>~ Curling ~</h2></td> <td id="td2" rowspan="2"><img src="../images/curlingMid.jpg" width="100%" height="100%" border="2" alt=""/></td> <td id="td1"><h2>~ Curling ~</h2></td> </tr> </table> #td1 { width: 32%;vertical-align: text-top; } #td2 { padding-right: 5px; padding-top: 5px; } 

Answer 1

The image is an inline element and has some empty space below it due to its alignment with the baseline.

To fix this, try:

 #td2 img {display: block;} 

or

 #td2 img {vertical-align: bottom;} 

Violin Demo: http://jsfiddle.net/audetwebdesign/WxrvC/

Note that you have indented 5 pixels above and to the right of the image, and I suggested that this is for styling.

In addition, the id attributes must be unique on the page, use the class , much easier to maintain and simplify the reuse of CSS rules.

Answer 2

different browsers display html elements with different default values ​​/ fields / intervals, etc., you can try reset as follows:

 #table td {padding: 0px; margin: 0px;} #table {border-spacing: 0px;}