Html ColSpan/RowSpan이 예상대로 작동하지 않습니다.

Question

IE와 Chrome에서 이상한 버그가 발생했습니다. 나는 정보의 매트릭스를로드하는 응용 프로그램을 가지고 있지만 어떤 경우에는 올바르게 표시되지 않습니다. 구성에 의해 정보가 표시되는 방식을 바꿀 수 있으며 rowspan 및 colspan을 사용합니다. 자바 스크립트를 사용하지 않고 HTML 만 사용하고 있습니다. 무슨 일이 일어나고있는이 이미지 쇼 : 여기 캔트 아직

죄송 후 이미지하지만 다음을 눌러 두 번째 행의 첫 번째 셀이 확장됩니다 어떤 이유 바이올린 http://jsfiddle.net/gondias/22o07mbt/

<table cellspacing="6" cellpadding="0" style="width:558px; background-color:red"> 
    <tr> 
     <td colspan="3" rowspan="2"> 
      <div class="tile_3x2"></div> 
     </td> 
     <td colspan="1" rowspan="2"> 
      <div class="tile_1x2"></div> 
     </td> 
    </tr> 
    <tr></tr> 
    <tr> 
     <td colspan="2" rowspan="2"> 
      <div class="tile_2x2"></div> 
     </td> 
     <td colspan="2" rowspan="2"> 
      <div class="tile_2x2"></div> 
     </td> 
    </tr> 
    <tr></tr> 
    <tr> 
     <td colspan="4" rowspan="1"> 
      <div class="tile_4x1"></div> 
     </td> 
    </tr> 
    <tr> 
     <td colspan="4" rowspan="1"> 
      <div class="tile_4x1"></div> 
     </td> 
    </tr> 
</table> 

에게 있습니다. 질문이 있으시면 알려주십시오.

나는 rowspan/colspan의 사용법이 정확하다고 생각합니다. 아무도 여기서 무슨 일이 일어나고 있는지 알고 있습니까? 도움을 주셔서 감사합니다. 저는 정말 고심하고 있습니다.

Answer 1

정말 여기 테이블을 사용해야합니까? 이메일 뉴스 레터에 사용됩니까? display: inline-block;과 함께 div를 사용하면 테이블없이 원하는 결과를 얻을 수 있습니다. 당신은 당신이 거기에 무슨 일이 일어나고 있는지 볼 것이다 TD 태그에 테두리를 배치하면

http://jsfiddle.net/rcdmk/22o07mbt/1/

td { 
    width: 132px; 
} 

: 당신이 정말이 방법 (권장하지 않음)을 수행해야하는 경우

,이 솔루션입니다. 셀 (열)에는 특정 너비가 없으므로 브라우저는 내용에 따라 추측해야하며 이는 브라우저간에 일관된 동작이 아닙니다. 세포에 폭을 주어야합니다.