Div文本流出

Question

在表格中，我试图从下到上垂直放置文本div，文本顶部位于表格单元格的左侧。当我这样做时，文本流出它的父<th>。为此，我使用以下内容：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

当我向div添加文本时，此文本正在流出它。看起来像

如何根据文本长度让细胞生长？

更新 当我在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;

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

它会自动扩展您的单元格大小。