自動展開TD含まれるDIVによる

Question

私は3x3 htmlテーブルを持っています。 2番目の行では、1番目と3番目の列には内容が垂直に表示されるように回転するdivが含まれています。他のセルはコンテンツを正常に表示します。これらの垂直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