여백이있는 HTML의 표 셀이 겹칩니다.

Question

열이 겹쳐있는 HTML 이메일을 보내려고합니다. div와 함께이 작업을 수행 할 때 문제는 없지만 테이블로 처리해야하며 수년 동안 테이블을 사용하지 않았습니다!

나는 녹색 COL은 행의 하단에 상단과 오버 플로우로부터 변위 될 필요가있다. 파란색 행에는 배경 이미지가 있고 녹색 열은 단색 배경색이됩니다. 행 안쪽에 새 테이블을 중첩시키고 배경 이미지보다 키가 큰 행을 시도했지만 다른 해결책이 있는지 알고 싶습니다.

이 내가 현재 가지고있는 것입니다 :

http://jsfiddle.net/mdzvvx3q/

<table width="800" border="0" cellspacing="0"> 
    <tr> 
    <td height="98" colspan="2" style="background-color: #efefef;"></td> 
    </tr> 
    <tr height="400" style="background-color: #f0c;"> 
    <td colspan="2"> 
     <table height="400" width="800" border="0" cellspacing="0"> 
      <tr> 
      <td height="100" colspan="2">Some text here</td> 
      </tr> 
      <tr> 
      <td width="500" height="278"></td> 
      <td width="300" style="background-color: #0fc;">More text here</td> 
      </tr> 
     </table> 
    </td> 
    <tr> 
    <td height="98" colspan="2" style="background-color: #efefef;"></td> 
    </tr> 
</table> 

Answer 1

보십시오.

방금 ​​새로운 간체 HTML 구조를 만들고 인라인 스타일로 적용했습니다.

전자 메일 서식 파일을 만들려고하는 경우. 인라인 스타일을 사용해야합니다. 이메일 템플릿은 내부 & 외부 스타일 시트를 지원하지 않습니다.

<table style="width: 500px;" cellpadding="10" cellspacing="0"> 
    <tr style="background: #FF888A;"> 
     <td width="50%">First</td> 
     <td></td> 
    </tr> 
    <tr style="background: #00C6FF;"> 
     <td colspan="2">First</td> 
    </tr> 
    <tr> 
     <td style="background: #00C6FF;">First</td> 
     <td style="background:#00FF95;">Overlay content</td> 
    </tr> 
    <tr> 
     <td style="background: #00C6FF;">First</td> 
     <td style="background:#00FF95;"></td> 
    </tr> 
    <tr> 
     <td style="background: #fff;">First</td> 
     <td style="background:#00FF95;"></td> 
    </tr> 
    <tr style="background: #fff;"> 
     <td colspan="2">First</td> 
    </tr> 
    <tr style="background: #FF888A;"> 
     <td colspan="2">First</td> 
    </tr> 
    <tr style="background: #FF888A;"> 
     <td colspan="2">First</td> 
    </tr> 
</table> 

JSFIDDLE DEMO

Answer 2

업데이트] 답변

나는 당신이 jsfiddler 링크를 추가하기 때문에이 답변을 수정했다.

아래 http://jsfiddle.net/mdzvvx3q/3/

<table width="800" border="0" cellspacing="0"> 
    <tr> 
    <td height="98" colspan="2" style="background-color: #efefef;"></td> 
    </tr> 
    <tr height="400" style="background-color: #f0c;"> 
    <td colspan="2"> 
     <table height="400" width="800" border="0" cellspacing="0"> 
      <tr> 
      <td height="100" colspan="2">Some text here</td> 
      </tr> 
      <tr style="position: absolute; z-index: 1; bottom: 250px;"> 
      <td width="500" height="278"></td> 
      <td width="300" style="background-color: #0fc;">More text here</td> 
      </tr> 
     </table> 
    </td> 
    <tr> 
    <td height="98" colspan="2" style="background-color: #efefef;"></td> 
    </tr> 
</table> 

ORIGINAL 답변 당신은이 CSS로 할 수 있어야한다 : 여기서 일해야하고 아래의 코드는 업데이트 jsfiddler 링크입니다. tr 및 td를 사용하여 테이블을 만들고 position : absolute 및 z-index CSS 속성을 사용하십시오.

코드는 다음과 같습니다 여기에 라이브 예제 : http://jsfiddle.net/luisbox/7x98qr7y/

HTML :

<table> 
    <tr class="red"> 
     <td>First</td> 
    </tr> 
    <tr class="blue"> 
     <td>second</td> 
    </tr> 
    <tr class="overlap"> 
     <td>overlapped</td> 
    </tr> 
    <tr> 
     <td>blank</td> 
    </tr>  
    <tr class="red"> 
     <td>second last</td> 
    </tr> 
    <tr class="red"> 
     <td>last</td> 
    </tr> 
</table> 

CSS : 코드 아래

table{ 
    width: 500px; 
} 

tr{ 
    width: 100%; 
    height: 30px; 
} 

tr.red{ 
    background: red; 
} 

tr.blue{ 
    background: lightblue; 
} 

.overlap{ 
    position: absolute; 
    z-index: 0; 
    left: 300px; 
    background: green; 
    width: 200px; 
    height: 60px; 
    color: white; 
}