테이블 높이가 브라우저에서 동일하지 않음

Question

다음 코드는 테이블과 함께 있지만 브라우저가 다르거 나 인쇄 할 때 테이블 높이가 동일하지 않습니다. 그림 1,2와 3의 차이점을보십시오. 모든 테이블에 선이 있거나없는 높이가 필요합니다.

.prn_outer { 
    margin: 0; 
    padding: 0; 
    border: 1px solid #333; 
} 

.prn_inner { 
    margin: 0; 
    padding: 0; 
    height: 160px; 
    border: 1px solid #333; 
} 

.prn_row_top { 
    margin: 0; 
    padding: 0; 
    border: 1px solid #333; 
} 

.prn_row_bottom { 
    margin: 0; 
    padding: 0; 
    border-bottom-width: 1px; 
    border-bottom-style: solid; 
    border-bottom-color: #333; 
} 

HTML : 고맙습니다

마티

CSS

<table border="0" cellpadding="0" cellspacing="0" width="100%" class="prn_outer"> 
    <tr> 
    <td>&nbsp;</td> 
    </tr> 
    <tr> 
    <td><table border="0" cellpadding="0" cellspacing="0" width="100%"> 
     <tr> 
      <td width="20%"><table border="0" height="160" cellpadding="0" cellspacing="0" width="100%" class="prn_inner"> 
       <tr> 
       <td height="18">&nbsp;</td> 
       </tr> 
       <tr> 
       <td height="18" class="prn_row_bottom">&nbsp;</td> 
       </tr> 
       <tr> 
       <td height="18">&nbsp;</td> 
       </tr> 
       <tr> 
       <td height="18" class="prn_row_bottom">&nbsp;</td> 
       </tr> 
       <tr> 
       <td height="18">&nbsp;</td> 
       </tr> 
       <tr> 
       <td height="18" class="prn_row_bottom">&nbsp;</td> 
       </tr> 
       <tr> 
       <td height="18">&nbsp;</td> 
       </tr> 
       <tr> 
       <td height="18">&nbsp;</td> 
       </tr> 
      </table></td> 
      <td width="20%"><table border="0" height="160" cellpadding="0" cellspacing="0" width="100%" class="prn_inner"> 
       <tr> 
       <td height="18">&nbsp;</td> 
       </tr> 
       <tr> 
       <td height="18" class="prn_row_bottom">&nbsp;</td> 
       </tr> 
       <tr> 
       <td height="18">&nbsp;</td> 
       </tr> 
       <tr> 
       <td height="18" class="prn_row_bottom" >&nbsp;</td> 
       </tr> 
       <tr> 
       <td height="18">&nbsp;</td> 
       </tr> 
       <tr> 
       <td height="18" class="prn_row_bottom">&nbsp;</td> 
       </tr> 
       <tr> 
       <td height="18">&nbsp;</td> 
       </tr> 
       <tr> 
       <td height="18">&nbsp;</td> 
       </tr> 
      </table></td> 
      <td width="20%"><table border="0" height="160" cellpadding="0" cellspacing="0" width="100%" class="prn_inner"> 
       <tr> 
       <td height="18" class="prn_row_bottom">&nbsp;</td> 
       </tr> 
       <tr> 
       <td height="134">&nbsp;</td> 
       </tr> 
      </table></td> 
      <td width="20%"><table width="100%" height="160" border="0" cellpadding="0" cellspacing="0"> 
       <tr> 
       <td height="158">&nbsp;</td> 
       </tr> 
      </table></td> 
      <td width="20%"><table width="100%" height="160" border="0" cellpadding="0" cellspacing="0"> 
       <tr> 
       <td height="158">&nbsp;</td> 
       </tr> 
      </table></td> 
     </tr> 
     </table></td> 
    </tr> 
</table> 

Answer 1

사용자가 표를 중첩 할 때 추가로 픽셀 높이를 고려하지 않아야합니다.

td table.prn_inner { 
    margin: 0; 
    padding: 0; 
    height: 158px <----- this can't stay at 160px, if it's nested 
    border: 1px solid; 
} 

HTML과 CSS의 테이블 매개 변수간에 충돌이 있습니다. 모든 테이블 선언을 CSS로 이동하면 HTML을 훨씬 쉽게 읽을 수 있습니다.

CSS 
table { width:100%; } 
td { width:20% } 
.prn_inner td { height:18px } 

<table> 
    <tr> 
     <td><table class="prn_inner"> 
       <tr> 
       <td>table in a table</td> 
       </tr> 
      </table> 
     </td> 
    </tr> 
</table> 

참고 : 우수 사례 = 표는 데이터 용입니다. 중첩 테이블은 레이아웃/디자인에서 잘못된 선택을합니다.

Answer 2

는 prn_oute 퍼팅 시도했다 r 높이뿐만 아니라? 인쇄를 위해 @media 인쇄를 사용할 수 있으며 필요한 올바른 형식으로 재생할 수 있으며 인쇄에만 적용됩니다.