이미지를 테이블 셀에 강제로 채우는 방법 전체적으로

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;} 

바이올린 데모 : 이미지의 상단과 오른쪽 5px 패딩을 설정 한 http://jsfiddle.net/audetwebdesign/WxrvC/

주을 , 그리고 그 스타일을 목적으로 가정합니다.

또한 id 속성은 페이지에서 고유해야하며 class을 사용하면 유지 관리가 훨씬 쉬워지고 CSS 규칙을 더 쉽게 재사용 할 수 있습니다.

Answer 2

다른 브라우저 간격 등 다른 기본 패딩/마진 /와 HTML 요소를 렌더링 ..이 같은이를 다시 시도 할 수 있습니다 :

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