브라우저 간 일관성있는 행 크기 조정

Question

두 개의 열이있는 테이블이 세 행으로 있다고 가정 해 봅니다. 이제 왼쪽 열에는 모든 행에 내용이 있지만 오른쪽에는 <textarea> 요소를 rowspan="3"과 연결합니다.

<table> 
    <tr><td>row one</td><td rowspan="3"><form><textarea></textarea></form></td></tr> 
    <tr><td>row two</td></tr> 
    <tr><td>row three</td></tr> 
</table> 

대부분의 최신 브라우저에서 텍스트 영역의 크기를 조정할 수 있지만이를 제한 할 필요는 없습니다. 이 문제는 텍스트 영역이 수직으로 커지고 테이블 밖으로 늘어나 기 시작할 때 발생합니다. Chrome에서는 마지막 행만 크기가 조정되고 (원하는 동작) Firefox에서는 모두 확장됩니다.

고정 된 높이와 늘리는 행을 설정할 수있는 방법이 있습니까?

Answer 1

나는 결코 말할 좋아 ..하지만이 경우에는 아마 코드를 사용하지 않는 crossbrowser 호환 방법이없는 당신은

테이블 높이에 의해 제한되지 않는, 스트레칭하도록 설계해야하고, 브라우저가 셀 높이와 너비를 계산할 수있는 테이블을 "통과"하는 방식은 각 브라우저에 달려 있습니다. 즉, 어렵고 빠른 추천은 없습니다. 대부분의 경우 테이블을 처음 통과 할 때 행 스파 스를 치고 전체 테이블 높이를 텍스트 영역에서 그 다음 실제 행을 똑같이 나누면 브라우저가 다시 돌아 가야하는 경우 테이블이 매우 빨리 렌더링되지 않는 여러 행 스팬이있는 훌륭한 긴 테이블 인 경우 상상할 수있는 방식으로 파싱을 덜 수행합니다 행 높이를 다시 조정하는 테이블

어쨌든 견고한 크로스 브라우저 솔루션은 rowspan을 사용하지 말고 대신 테이블 (yuk;)을 중첩하는 것입니다. 그러면 첫 번째 셀에 3 행이 들어갑니다. 첫 번째 셀 안에 세 개의 div를 입력하여 행을 시뮬레이션하십시오.

<table summary="" cellspacing="0"> 
<tr> 
    <td> 
    <div>row one</div> 
    <div>row two</div> 
    <div>row three</div> 
    </td> 
    <td><form><textarea></textarea></form></td> 
</tr> 
</table> 

그런 다음 테이블과 같이 스타일을 지정하십시오. div를 사용하면 텍스트 영역과 관련하여 높이를 최대한 제어 할 수 있습니다.