Auto expand TD selon contenu DIV

Question

J'ai une table html 3x3. Dans la deuxième ligne, la première et la troisième colonne contiennent des div qui sont pivotés pour afficher le contenu verticalement. D'autres cellules montrent le contenu normalement. Ces divs verticaux débordent de la hauteur TD. Je veux augmenter dynamiquement la hauteur TD en fonction de la hauteur Div (largeur verticale).

Voici le code de fiddle

MISE À JOUR

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); 
} 

Merci d'avance.

Answer 1

Utilisation white-space: pre; dans td.

édite

Cochez cette extrait mis à jour. J'ai utilisé 'writing-mode: tb-rl' pour rendre le texte vertical.

Vérifiez Can I Use pour le soutien de broswer

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

Vous pouvez y parvenir avec jQuery:

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

Il prend la largeur de ce que la TD aurait été si horizontal et l'applique à la hauteur au lieu.

Jsfiddle here