HTML : rowspan을 사용하여 테이블의 개별 행 높이 제어

Question

2 행 2 열의 테이블이 있다고 가정합니다. 그런 다음 두 번째 열의 행을 병합하고이 열을 여러 줄의 텍스트로 채 웁니다.

|------|------| 
|  | text | 
|------| text | 
|  | text | 
|------|------| 

내 브라우저 (IE 8, 표준 모드)는 자동으로 첫 번째 열의 행의 높이를 같은 높이로 조정합니다. 두 번째 열에 행을 추가하면 첫 번째 열의 행 크기가 커집니다. 이제 텍스트가 첫 번째 열의 행 중 하나에 추가되면 IE는 해당 행을 텍스트를 포함하도록 확장하고 나머지 높이를 다른 행에 배포합니다.

문제는 첫 번째 열의 텍스트를 은 텍스트가 두 번째 열에 추가 될 때을 이동하지 않기를 원합니다. (컨트롤은 자바 스크립트를 사용하여 동적으로 표시되거나 숨겨 지므로 왼쪽 열의 크기가 매번 변경됩니다.) 또한 수직 정렬 퍼팅 더 초과 세포 하나의 텍스트 사이의 공간과 2

|---------|--------| 
|text  |text | 
|---------|  | 
|text  |text | 
|   |text | 
|   |  | 
|---------|--------| 

가 없습니다 그래서 첫 번째 열에서 텍스트가 셀의 상단에 앉아서 왼쪽 상단 셀 크기를 갖고 싶어 : 상단 왼쪽 상단 셀은 원하는 셀의 텍스트 위치를 지정하지만 아래 셀의 텍스트는 페이지 아래쪽으로 너무 멀리 보입니다. 렌더링 된 셀의 실제 크기가 렌더러에 의해 제어되고 있기 때문입니다. 셀의 높이를 설정하려고합니다. style = "height : 100px;" 어느 쪽이든 작동하지 않는 것 같습니다. 수동으로 높이를 지정하고 싶지는 않습니다. IE가 왼쪽 상단 셀의 높이를 최소화하여 여분의 공간이 없도록하고 텍스트가 두 번째 열에 추가 될 때 텍스트가 움직이지 않게하고 싶습니다.

Answer 1

테이블을 사용해야합니까? 이 같은 효과는 아마 CSS보다 쉽게 ​​달성 할 수있다 :

HTML을 :

<div class="row"> 
    <div class="col1"> 
     Row 1 Title      
    </div> 
    <div class="col2"> 
     Row 1 text<br /> 
     more text<br /> 
     even more text 
    </div> 
</div> 
<div class="row"> 
    <div class="col1"> 
     Row 2 Title 
    </div> 
    <div class="col2"> 
     Row 2 text<br /> 
     more text<br /> 
     even more text<br /> 
     still more text 
    </div> 
</div> 
<div class="row"> 
    <div class="col1"> 
     Row 3 Title 
    </div> 
    <div class="col2"> 
     Row 3 text<br /> 
     more text<br /> 
     even more text<br /> 
     still more text<br /> 
     yet another line of text 
    </div> 
</div> 

CSS :

.row { 
    margin-bottom: 10px;    
    overflow: hidden; 
} 
.col1, .col2 { 
    float: left; 
} 
.col1 { 
    margin-right: 10px; 
} 

JSFiddle

Answer 2

내가 그것을 이해하는 것 같아요. 처음에는 텍스트가없는 셀이있는 경우 해당 셀에 높이가 없습니다. 그러나 텍스트를 추가하면 동일한 열의 해당 셀 아래에있는 셀이 아래로 이동하여 셀에 새로 추가 된 텍스트를위한 공간을 만듭니다 (예 : A1).

공백 셀에   (인코딩 된 공백)을 추가하면 실제로 보이는 콘텐츠를 추가하지 않고도 해당 셀에 한 줄의 텍스트 높이를 갖게됩니다.