Div Text aus th

Question

Innerhalb einer Tabelle fließt Ich versuche, einen Text div von unten vertikal zu positionieren, mit der Spitze des Textes nach oben, positioniert an der linken Seite des Tablecell. Wenn ich dies tue, fließt der Text aus seinem Elternteil <th>. Dazu verwende ich die folgenden:

table { 
    border-collapse: collapse; 
    table-layout: fixed; 
    width:100%; 
} 

table th{ 
    font-size: 1.4rem; 
    text-align: right; 
} 

table th div { 
    writing-mode: vertical-rl; 
    transform: rotate(-180deg); 
} 

und einem Tisch:

<table> 
    <tr> 
     <th><div>Lorem ipsum gini fixum</div></th> 
    </tr> 
</table> 

Wenn ich Text in die div hinzufügen, dieser Text fließt aus ihm heraus th ist. Es sieht aus wie

Wie kann ich die Zelle abhängig von der Textlänge wachsen lassen?

UPDATE Als ich die Tabellenklasse in meinem HTML ändern, ist der Text nicht mehr überfüllt. Es hat etwas mit dieser Klasse zu tun. Ich werde es mir ansehen.

GELÖST Die Ausgabe der folgenden wurde: table-layout: fixed; width:100%;

Answer 1

ich Update-Code-PLZ sprechen Sie mit Ihrem html. hier HTML und CSS.

-Update in CSS:

writing-mode: vertical-rl; 
-webkit-writing-mode: vertical-rl; 
-ms-writing-mode: vertical-rl; 

table { border-collapse:collapse; } 
 
td, th {border: 1px black solid; padding: 3px; } 
 
table th{ 
 
    font-size: 1.4rem; 
 
    text-align: right; 
 
} 
 

 
table th div { 
 
    writing-mode: vertical-rl; 
 
    -webkit-writing-mode: vertical-rl; 
 
    -ms-writing-mode: vertical-rl; 
 
    transform: rotate(-180deg); 
 
}

<table> 
 
<tr> 
 
    <th>test</th> 
 
    <th>teststst</th> 
 
    <th>test</th> 
 
</tr> 
 
<tr> 
 
    <th>test</th> 
 
    <th><div>Lorem ipsum gini fixasdasdf asdfsdf asdfasdf asdaasdfasd fasdfsdfasdfa sdsdfasdafasd asdsdjkas flasdfa fasdfasdfadffum</div></th> 
 
    <th>test</th> 
 
</tr> 
 
<tr> 
 
    <th>test</th> 
 
    <th>teststst</th> 
 
    <th>test</th> 
 
</tr> 
 
</table>

Seine automatische erweitern Zellengröße.