Поворот текста внутри <td>, но не позволяет увеличить ширину <td>? - PullRequest
Новая
       5

Поворот текста внутри <td>, но не позволяет увеличить ширину <td>?

0 голосов
/ 26 декабря 2018

У меня есть таблица с фиксированной шириной, и я пытаюсь повернуть текст внутри одного <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 .

Я не хочу увеличивать размер тд, не имеет значения, насколько большой текст.Как я могу решить эту проблему?

1 Ответ

0 голосов
/ 26 декабря 2018

Изменить это:

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

Примерно так:

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

Я добавил span в 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>
...