html - 旋转 中的文本，但不允许增加 的宽度？

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>