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中添加了跨度，因为我想为文本添加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>

在内部旋转文本，但不允许增加？

1 个答案: