旋转里面的文本<td>，但不允许增加 <td>？

Question

我有一个固定宽度的表格，我正在尝试在不影响表格布局的情况下旋转一个<td>内的文本。但问题是，如果文本很大，它会包裹文本。我试图设置nowrap但它不适用于%，但是，它与px一起工作.

table {
  border:1px solid black;
  border-collapse:collapse;
}
table td {
  border:1px solid black;
  border-collapse:collapse;
}
.vertical-align{
 transform:rotate(-90deg); 
 white-space: nowrap;
}

<table>
<tr>
  <td style="width:5%;" rowspan="2" class="vertical-align" >
    Dummy Heading   Dummy Heading
  </td>
    <td style="width:95%;">
    Dummy Text Dummy Text
  </td>
</tr>
<tr>
    <td style="width:95%;">
    Dummy Text Dummy Text
  </td>
</tr>
</table>

这是JSFiddle。

我不想增加td的大小，不管文字有多大。如何解决这个问题？

Answer 1

更改以下内容：

<td class="vertical-align">text</td>

喜欢这个：

<td><span class="vertical-align">text</span></td>

我在 td 中添加了 span，因为我想为文本添加writing-mode: vertical-rl样式，而 td 元素不能正确支持此功能。下面是一个示例：

table {
  border-collapse:collapse
}
table td {
  border:1px solid black
}
.vertical-align {
  white-space:nowrap;
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  padding: 10%; /* optional */
  transform: rotate(180deg) /* you want */
}

<table width="100%">
  <tr>
    <td width="5%" rowspan="2"><span class="vertical-align">Dummy Heading Dummy Heading</span></td>
    <td width="95%">Dummy Text Dummy Text</td>
  </tr>
  <tr>
    <td width="95%">Dummy Text Dummy Text</td>
  </tr>
</table>