旋转 <td> 内的文字，但不允许增加 <td> 的宽度？

Question

我有一个固定宽度的 table，我试图在不影响 table 布局的情况下旋转一个 <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>

旋转 <td> 内的文字，但不允许增加 <td> 的宽度？

Rotate the text inside <td>, but doesn't allow to increase the width of <td>?

html

css

html-table

rotation