Div文本流出

Question

在表格中，我試圖從下到上垂直放置一個文本div，文本的頂部位於表格單元的左側。當我這樣做時，文本流出它的父母<th>。爲此，我使用以下命令：

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

和表：

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

當我添加文本到div，這個文本流出它的日的。它看起來像

如何讓細胞生長取決於文本長度？

UPDATE 當我在我的html中更改表類時，文本不再溢出。這與該課程有關。我會仔細看看的。

解決 的問題是以下幾點：table-layout: fixed; width:100%;

Answer 1

我有更新代碼PLZ與HTML檢查。這裏是HTML和CSS。

更新的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>

它的自動擴展您的單元尺寸。