Wie erzwinge ich ein Bild, um seine Tischzelle zu füllen VOLLSTÄNDIG

Question

Ich habe viele Foren gelesen und die Lösung dort versucht, aber keiner von ihnen hat funktioniert, ich habe immer noch eine kleine Lücke zwischen all meinen Bildern. Hier ist der 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

Das Bild ist ein Inline-Element und hat einigen Leerraum darunter, weil, wie es mit der Grundlinie ausgerichtet ist.

es zu beheben, versuchen:

#td2 img {display: block;} 

oder

#td2 img {vertical-align: bottom;} 

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

Hinweis, die Sie 5px Polsterung nach oben und rechts des Bildes festgelegt haben , und ich nahm an, dass das Styling ist.

Auch id Attribute sollten auf einer Seite eindeutig sein, verwenden class, viel einfacher zu pflegen und ermöglicht eine einfachere Wiederverwendung von CSS-Regeln.

Answer 2

verschiedene Browser HTML-Elemente mit verschiedenen Standard-Polsterung/Ränder/Abstand etc .. machen können Sie diese wie folgt versuchen, zurück:

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