如何強制圖片填充其表格單元完全

Question

我已經通過很多論壇閱讀並嘗試解決方案，但沒有一個工作我仍然有一個我的所有圖像之間的小差距。下面是代碼：

<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

的圖像是一個內聯元素，有因爲它是如何與基線對齊它下面的一些空白。

要解決它，嘗試：

#td2 img {display: block;} 

或

#td2 img {vertical-align: bottom;} 

小提琴演示：http://jsfiddle.net/audetwebdesign/WxrvC/

注意已設置爲5px填充到圖像的頂部和右側，我認爲這是爲了造型的目的。

此外，id屬性在頁面上應該是唯一的，使用class，更易於維護並允許更輕鬆地重用CSS規則。

Answer 2

不同的瀏覽器渲染不同的默認填充/利潤率/間距等HTML元素..你可以嘗試重置這些是這樣的：

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