내가 직면 한 문제는 테이블의 TD가 자신의 너비를 명시 적으로 설정 했음에도 불구하고 테이블의 너비를 상속한다는 것입니다.
코드는 다음과 같습니다.
<div class="widget widget-new-products">
<div class="widget-products">
<table cellspacing="0" width="640px" cellpadding="0" border="0" align="center">
<tr>
<td>
<img src="header.gif" alt="New Releases">
</td>
</tr>
<tr style="font-size: 0;">
<td width="30px"><img width="30px" height="95px" src="leftsep.gif" alt="" ></td>
<td width="85px">
<a href="" title="" class="product-image"><img src="product1.jpg" width="85" height="85" alt="image" ></a>
</td>
<td width="100px">
<a style="font-family:sans-serif; font-size:13px; line-height:14px; color:#444; font-weight:bold;" title="" href="">item 1</a>
</td>
<td width="100px" align="right">
<p style="font-family:sans-serif; font-size:22px; line-height:24px; font-weight:bold; color:#e05371; margin:0 0 5px 0;">£30.00</p>
<a href=""><img src="view-product.jpg" height="30px" width="111px" alt="View Product"></a>
</td>
<td width="10px">
</td>
<td width="85px">
<a href="" title="" class="product-image"><img src="product2.jpg" width="85" height="85" alt="" ></a>
</td>
<td width="100px">
<a style="font-family:sans-serif; font-size:13px; line-height:14px; color:#444; font-weight:bold;" title="" href="">item 2</a>
</td>
<td width="100px" align="right">
<p style="font-family:sans-serif; font-size:22px; line-height:24px; font-weight:bold; color:#e05371; margin:0 0 5px 0;">£10.00</p>
<a href=""><img src="view-product.jpg" height="30px" width="111px" alt="View Product"></a>
</td>
<td width="30px"><img width="30px" height="95px" src="rightsep.gif" alt=""></td>
</tr>
<tr>
<td>
<img src="footer.gif" alt="">
</td>
</tr>
</table>
</div>
</div>
특히 영향을받는 TD는 표에서 첫 번째입니다.
<td width="30px"><img width="30px" height="95px" src="leftsep.gif" alt="" ></td>
30px 대신 640px 의 테이블 너비를 상속합니다 .
내가 무엇을 변경하든 문제는 여전히 존재하는 것 같습니다. 로컬과 JSFiddle에서 모두 테스트했습니다.
나는 결코 HTML 경험이 없으므로 문제가 무엇인지 잘 모르겠습니다.
업데이트 된 코드
<div class="widget widget-new-products">
<div class="widget-products">
<table cellspacing="0" width="640px" cellpadding="0" border="0" align="center" style="border-spacing: 0;">
<tr>
<td colspan="8">
<img src="http://crazybeatweb1.cms.iwebcloud.co.uk/media/newsletter/new-releases.gif" alt="New Releases">
</td>
</tr>
<tr>
<td width="30"><img width="30px" height="95px" src="http://crazybeatweb1.cms.iwebcloud.co.uk/media/newsletter/new-releases-left.gif" alt="" ></td>
<td width="85">
<a href="" title="" class="product-image"><img src="http://crazybeatweb1.cms.iwebcloud.co.uk/media/catalog/product/cache/1/small_image/85x/9df78eab33525d08d6e5fb8d27136e95/1/_/1.jpg_14603.jpg" width="85" height="85" alt="image" ></a>
</td>
<td width="100">
<a style="font-family:sans-serif; font-size:13px; line-height:14px; color:#444; font-weight:bold;" title="" href="">Clydie King - Direct Me - Inc Never Like This Before</a>
</td>
<td width="111" align="right">
<p style="font-family:sans-serif; font-size:22px; line-height:24px; font-weight:bold; color:#e05371; margin:0 0 5px 0;">£30.00</p>
<a href=""><img src="http://crazybeatweb1.cms.iwebcloud.co.uk/media/newsletter/view-product.jpg" height="30px" width="111px" alt="View Product"></a>
</td>
<td width="85">
<a href="" title="" class="product-image"><img src="http://crazybeatweb1.cms.iwebcloud.co.uk/media/catalog/product/cache/1/small_image/85x/9df78eab33525d08d6e5fb8d27136e95/4/_/4.jpg_14418.jpg" width="85" height="85" alt="" ></a>
</td>
<td width="100">
<a style="font-family:sans-serif; font-size:13px; line-height:14px; color:#444; font-weight:bold;" title="" href="">T.M.V.S. - Don't Be Shy</a>
</td>
<td width="111" align="right">
<p style="font-family:sans-serif; font-size:22px; line-height:24px; font-weight:bold; color:#e05371; margin:0 0 5px 0;">£10.00</p>
<a href=""><img src="http://crazybeatweb1.cms.iwebcloud.co.uk/media/newsletter/view-product.jpg" height="30px" width="111px" alt="View Product"></a>
</td>
<td width="30">
<img width="30px" height="95px" src="http://crazybeatweb1.cms.iwebcloud.co.uk/media/newsletter/new-releases-right.gif" alt="">
</td>
</tr>
<tr>
<td colspan="8">
<img src="http://crazybeatweb1.cms.iwebcloud.co.uk/media/newsletter/new-releases-bottom.gif" alt="">
</td>
</tr>
</table>
</div>
</div>
이제 중간 줄 위와 아래에 제거 할 수없는 간격이 생겼습니다.
테이블의 모든 행에는 동일한 수의 셀이 있어야합니다. 행에서 더 적은 수의 셀을 사용 colspan하려면 일치 하도록 속성을 명시 적으로 설정해야합니다 .
<tr>
<td colspan="9"> <!-- set this to the maximum number of cells there will be in a row -->
<img src="header.gif" alt="New Releases">
</td>
</tr>
다음을 혼합하고 일치시킬 수 있습니다 colspan.
<tr>
<td colspan="5">
<img src="header.gif" alt="New Releases">
</td>
<td colspan="4">
<img src="header.gif" alt="New Releases">
</td>
</tr>
그러나 합계는 항상 표에 사용 된 최대 셀 수와 일치해야합니다.
이 프로세스는 테이블의 모든 행에 대해 반복되어야합니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다