자동 확장 TD 포함 된 DIV에 따라

Question

3x3 HTML 테이블이 있습니다. 두 번째 행에는 첫 번째와 세 번째 열에 내용이 세로로 표시되도록 회전 된 div가 포함됩니다. 다른 셀은 내용을 정상적으로 보여줍니다. 이러한 수직 구간은 TD 높이에서 오버플로됩니다. Div 높이 (세로 폭)를 기준으로 TD 높이를 동적으로 확장하려고합니다. 여기

는 업데이트] fiddle

의 코드입니다

HTML

<table> 

    <tr> 
    <td> 
     <div> 
     ? 
     </div> 
    </td> 
    <td> 
     <div> 
     <input placeholder="some text"> 
     <button>X</button> 
     </div> 
    </td> 
    <td> 
     <div> 
     ? 
     </div> 
    </td> 
    </tr> 

    <tr> 
    <td class="expand"> 
     <div class="vertical"> 
     <input placeholder="some text"> 
     <button>X</button> 
     </div> 
    </td> 
    <td> 
     <div> 
     <input placeholder="some text"> 
     <button>X</button> 
     </div> 
    </td> 
    <td class="expand"> 
     <div class="hw vertical"> 
     <input placeholder="some text"> 
     <button>X</button> 
     </div> 
    </td> 
    </tr> 

    <tr> 
    <td> 
     <div> 
     ? 
     </div> 
    </td> 
    <td> 
     <div> 
     <input placeholder="some text"> 
     <button>X</button> 
     </div> 
    </td> 
    <td> 
     <div> 
     ? 
     </div> 
    </td> 
    </tr> 

</table> 

CSS

table td { 
    border: 2px solid lightgray; 
} 

.hw { 
    width: 208px !important; 
    height: 20px; 
} 

.expand { 
    white-space: pre; 
} 

.vertical { 
    /* writing-mode: vertical-rl; */ 
    transform: rotate(90deg); 
} 

미리 감사드립니다.

Answer 1

td에서 사용 white-space: pre;.

는

확인이 업데이트 된 조각을 편집합니다. 텍스트를 세로로 만들기 위해 'writing-mode : tb-rl'을 사용했습니다. 이 broswer 지원

확인 Can I Use는

table td { 
 
    border: 2px solid lightgray; 
 
    white-space:nowrap 
 

 
    } 
 
.vertical { 
 
    writing-mode: tb-rl; 
 
}

<table> 
 

 
<tr> 
 
    <td> 
 
    <div> 
 
     ? 
 
    </div> 
 
    </td> 
 
    <td> 
 
    <div> 
 
     lorem ipsum 
 
    </div> 
 
    </td> 
 
    <td> 
 
    <div> 
 
     ? 
 
    </div> 
 
    </td> 
 
</tr> 
 

 
<tr> 
 
    <td> 
 
    <div class="vertical" > 
 
     vertical text 
 
    </div> 
 
    </td> 
 
    <td> 
 
    <div> 
 
    lorem ipsum 
 
    </div> 
 
    </td> 
 
    <td> 
 
    <div class="vertical"> 
 
    vertical text 
 
    </div> 
 
    </td> 
 
</tr> 
 

 
<tr> 
 
    <td> 
 
    <div> 
 
     ? 
 
    </div> 
 
    </td> 
 
    <td> 
 
    <div> 
 
     lorem ipsum 
 
    </div> 
 
    </td> 
 
    <td> 
 
    <div> 
 
     ? 
 
    </div> 
 
    </td> 
 
</tr> 
 

 
</table>

Answer 2

당신은 jQuery를 함께이를 달성 할 수

var height = $('.vertical').width(); $('.vertical').css({'height':height+'px'});

그것은 수평 경우 TD이었을 것입니다 무슨의 폭을 소요하고 대신 높이에 적용합니다.

Jsfiddle here