2013-12-11 1 views
0

테이블 안에 테이블이 있는데 전체 이미지가 아닌 전체 테이블을 채우려면 이미지를 넣고 싶습니다. enter image description here<td>을 테이블 안의 이미지로 채우는 방법은 무엇입니까?

: 여기

내가 무슨의 이미지입니다 나는 그것을 같이하고 싶지 않아 나는 각각의 이미지가 전체 푸른 공간

을 포함 할 :

.table { 

    color:#000; 
    width:100%; 
    border-width: 1px; 
    border-color: #D9D9D9; 
    border-collapse: collapse; 
    } 
    .table tr { 
    background-color: none; 
    } 
    .table td { 
    font-size:15px; 
    border-width: 1px; 
    padding:15px; 
    border-style: solid; 
    border-color: #D9D9D9; 
    text-align: center; 
    } 
    .header1 { 
    font-size:1em; 
    color:#000; 
    text-align:center; 
    text-decoration:underline;} 
: 여기

enter image description here 내 CSS입니다 여기

내 HTML입니다 :

<table class="table" border="1"> 
<td> 
<table> 
      <td><img src="http://januarymay.com/wp-content/uploads/2013/12/t-shirt2.jpg" alt="Tshirt model" height="100%" width="100%"></td> 
      <td><img src="http://januarymay.com/wp-content/uploads/2013/12/t-shirt2.jpg" alt="Tshirt model" height="100%" width="100%"></td> 
      <tr> 
      <td><img src="http://januarymay.com/wp-content/uploads/2013/12/t-shirt2.jpg" alt="Tshirt model" height="100%" width="100%"></td> 
      <td><img src="http://januarymay.com/wp-content/uploads/2013/12/t-shirt2.jpg" alt="Tshirt model" height="100%" width="100%"></td> 
      </tr> 
      </table> 
</td> 
<td> 
<h1 class="header1">AX Squares Tshirt</h1> 
<p>Favorite tshirt with graphics designed by the man. Heather gray. 100% Cotton.<p> 
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top"> 
<input type="hidden" name="cmd" value="_s-xclick"> 
<input type="hidden" name="hosted_button_id" value="R4HBCYS75M7P2"> 
<table> 
<tr><td><input type="hidden" name="on0" value="Choose your size:">Choose your size:</td></tr><tr><td><select name="os0"> 
    <option value="Small">Small $25.00 USD</option> 
    <option value="Medium">Medium $25.00 USD</option> 
    <option value="Large">Large $25.00 USD</option> 
    <option value="XL">XL $25.00 USD</option> 
</select> </td></tr> 
</table> 
<input type="hidden" name="currency_code" value="USD"> 
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"> 
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1"> 
</form> 


</td> 
</table> 

Here is a fiddle.

+0

에서 패딩을 제거하지만 두 번째 스크린 샷과 같이하지 않을 것인가? –

+0

이 테이블 데이터가 아니기 때문에 DIV를 사용하는 것이 더 유연한 구현입니다. – user3037493

답변

1

귀하의 HTML이 잘못 테이블 구조 당신은 행을 여러 번 누락이

<table> 
    <tr> 
     <td></td> 
    </tr> 
</table> 

처럼, 이것은 당신에게 원치 않는를 줄 것이다 결과

1

귀하의 .table td에는 padding:15px;가 있습니다. 제거하십시오. 마법사는 당신이 그들 전체 셀을 채우려는 경우, 전체 셀

+0

두 번째 이미지에서 원하지 않는 말을합니다. – MattCamp

1

을 당신이 전체 셀을 포함 할 그래서 .table td

+0

그건 제가 두 번째 이미지에서하고 싶지 않다고 말한 것을합니다. – MattCamp

+1

패딩을'.table'으로 옮긴다. 그러나 html 역시 유효하게 고친다. – jalynn2

관련 문제