표 셀 Google 크롬/Webkit으로 잘못된 렌더링

Question

다음 코드에서 COL1A 및 COL3A는 Chrome 또는 Webkit으로 50 % 높이가 아닙니다. 그것은 IE7과 Firefox에서 잘 작동합니다.

<table border="1"> 
    <tr> 
    <td height="100%">COL 1A</td> 
    <td rowspan="2">COL 2</td> 
    <td>COL 3A</td> 
    <td rowspan="2"> 
     COL 4<br/> 
     COL 4<br/> 
     COL 4<br/> 
     COL 4<br/> 
     COL 4<br/> 
     COL 4<br/> 
     COL 4<br/> 
     COL 4<br/> 
    </td> 
    </tr> 
    <tr> 
    <td height="100%">COL 1B</td> 
    <td>COL 3B</td> 
    </tr> 
</table> 

데모는 : http://dl.dropbox.com/u/255810/Jalios/Demo/TableChrome/table2.html

나는 (TR 또는 TD)에 다양한 높이를 설정하기 위해 시도했습니다. 패딩이나 여백을 사용하여 이미지를 설정하려고했지만 아무 것도 작동하지 않습니다.

Chrome 버그입니까? 방향 전환이나 조언이 있습니까? td를 들어

Answer 1

은 (는) 웹킷에서 문제가되는 것 같습니다. Chrome과 Safari에서도 동일한 문제가 발생합니다. 중앙에 일부를 제외하고 특정 높이의 행이있을 때 나타납니다. 더 높은 rowspan을 가진 또 다른 열이있는 경우 마지막 행만 업 스케일됩니다. 가로로이 문제가 나타나지 않습니다.

당신은 COLS 1과 3 에서 단일 셀 내에서 다른 테이블을 사용하지 않도록해야 ROWSPAN

<table border="1"> 
<tr><td><table height=100%><tr><td height="100%">COL 1A</td></tr> 
       <tr><td height="100%">COL 1B</td></tr> 
     </table></td> 
<td><td>COL 2</td> 
<td>COL 3A</td> 
<td> 
    COL 4<br/> 
    COL 4<br/> 
    COL 4<br/> 
... 

또한 당신은에 대응하여 CSS

Answer 2

의 height 속성은 전환에서 엄격한 정의의 일부가 아닌, 어쩌면 웹킷은 그것을 구현하지 않습니다. CSS를 사용해보십시오.

편집 : CSS에는 아무런 문제가 없습니다. 라인 당 한 행을 사용해야하는 경우 정확한 rowspan 속성을 사용하여 50 % 높이의 셀을 생성 할 수 있습니다.