Title: Rotate the text inside <td>, but doesn't allow to increase the width of <td>?
Tags: html;css;html-table;rotation
Question: I have a table with the fixed-widths and I am trying to rotate the text inside one <td&gt; without affecting the layout of table. But the problem is if the text is big, it wraps the text. I tried to set nowrap but it is not working with %, however, its working with 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&gt;
<tr&gt;
<td style="width:5%;" rowspan="2" class="vertical-align" &gt;
Dummy Heading   Dummy Heading
</td&gt;
<td style="width:95%;"&gt;
Dummy Text Dummy Text
</td&gt;
</tr&gt;
<tr&gt;
<td style="width:95%;"&gt;
Dummy Text Dummy Text
</td&gt;
</tr&gt;
</table&gt;
Here is the JSFiddle.
I don't want to increase the size of td, doesn't matter how big the text. How can I solve this problem?

Here is the accepted answer: Change this:
<td class="vertical-align"&gt;text</td&gt;
Like this:
<td&gt;<span class="vertical-align"&gt;text</span&gt;</td&gt;
I added span in td because I want to add writing-mode: vertical-rl style for text and td element does not support this properly. An example below:
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%"&gt;
<tr&gt;
<td width="5%" rowspan="2"&gt;<span class="vertical-align"&gt;Dummy Heading Dummy Heading</span&gt;</td&gt;
<td width="95%"&gt;Dummy Text Dummy Text</td&gt;
</tr&gt;
<tr&gt;
<td width="95%"&gt;Dummy Text Dummy Text</td&gt;
</tr&gt;
</table&gt;
Comment for this answer: I don't care if my text comes out of the td. I don't want to increase the size of my firs td.
Comment for this answer: This is what I was looking for.


{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 1, 'CommentCount': 0, 'ContentLicense': 'CC BY-SA 4.0', 'CreationDate': '2018:00:12/26/18', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<html><css><html-table><rotation>', 'Title': "Rotate the text inside <td>, but doesn't allow to increase the width of <td>?", 'ViewCount': 453, 'id': 53930070, 'user_AboutMe': '<p>A DotNet Developer with full life cycle exposure from analysis of initial requirements to designing, development,continuous integration, testing and deployment.</p>\n', 'user_AccountId': 4213552.0, 'user_DisplayName': 'Hussain Rauf', 'user_Reputation': 278.0, 'user_Views': 40.0, 'user_id': 3450526.0}}