Làm cách nào để buộc hình ảnh điền vào ô bảng COMPLETELY

Question

Tôi đã đọc qua nhiều diễn đàn và đã thử giải pháp ở đó nhưng không có giải pháp nào trong số đó hoạt động. Tôi vẫn có khoảng cách nhỏ giữa tất cả hình ảnh của mình. Đây là mã:

<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

Hình ảnh là một phần tử nội tuyến và có một số khoảng trắng bên dưới nó vì nó như thế nào là phù hợp với đường cuối sân.

Để khắc phục nó, hãy thử:

#td2 img {display: block;} 

hoặc

#td2 img {vertical-align: bottom;} 

Fiddle demo: http://jsfiddle.net/audetwebdesign/WxrvC/

Note mà bạn đã cài 5px padding để phía trên và bên phải của hình ảnh và tôi cho rằng đó là mục đích tạo kiểu tóc.

Ngoài ra, id thuộc tính phải là duy nhất trên một trang, sử dụng class, dễ dàng hơn nhiều để duy trì và cho phép dễ dàng sử dụng lại các quy tắc CSS.

Answer 2

trình duyệt khác nhau làm cho các yếu tố html với mặc định padding/lợi nhuận khác nhau/khoảng cách vv .. bạn có thể thử thiết lập lại những như thế này:

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