크롬 및 IE의 표 셀 크기 조정

Question

나는 HTML table
을 가지고 있습니다. 자세한 내용은 JSFiddle에서 언급했습니다.
Firefox에서는 잘 작동하지만 Chrome과 IE에서는 작동하지 않습니다! 그들에게 무슨 문제가 있습니까? 왜 그들은 첫 번째 열에 결정되지 않은 높이의 유일한 셀인 두 번째 행 대신 고정 된 높이를 가진 마지막 행의 셀을 확장합니다. 귀하의 경우는 underfind 때문이다

<table style="width: 100%;" dir="rtl" cellpadding="0" cellspacing="0"> 
<tr> 
    <td style="height: 100px; width: 176px; background:blue"> 
     this is a fixed size cell 
    </td> 
    <td rowspan="3" style="background:gray; height: 360px;">this cell is spanned 3 rows<br /> lots of content may be placed here</td> 
</tr> 
<tr> 
    <td style="background:red">this should expand depending on gray region</td> 
</tr> 

<tr>  
    <td style="height: 46px; background:blue">this is a fixed size cell</td> 
</tr> 

Answer 1

높이 알고리즘처럼 보인다 :
다음은 HTML 코드입니다. 당신은 td {height: auto} 가능한 모든 공간을 확장 할,하지만 '테이블 행'에 대한 '자동차'의

A '높이'값이 레이아웃에 사용되는 행 높이를 의미 MIN이다. MIN은 CSS 2.1 .... 셀 상자의 높이와 셀 상자 배향에 따라, 셀 상자의 높이

하고 마침내

CSS 2.1 않는 콘텐츠에 필요한 최소 높이이며 두 개 이상의 행에 걸쳐있는 셀이 행 높이 계산에 영향을주는 방법을 지정하지 마십시오. 행 높이에 대한 행 높이의 합이 행에 걸친 셀을 포함 할만큼 충분히 커야한다는 점을 제외하고는 지정하지 마십시오.

는 설명을위한 17.5.3 Table height algorithms