Vertical Text in a Table [duplicate] - html

Question

This question already has answers here:
Vertical Text Direction
(28 answers)
Closed 3 years ago.
I have a table with a lot of columns. So I want to create column headings with the text vertial with something like
<tr><td style="vertical???">Vertical</td>
<td style="Vertical???">Heading</td>...</tr>
Nothing fancy. No fancy offsets. Just vertical text in a cell.
It would end up something like
V H
e e
r a
t d
i i
c n
a g
l
I have tried many variations of floats and transform-origin but have failed to do this simplest thing. Weird text outside the box, easy. But a simple table heading, no.
Is it possible without resorting to absolute positioning and other gross hacks?

Answer 1

You can use CSS/text-orientation. But it doesn't change the width of td so made trick used div inside of td for which you want vertical text.
Here is the working example:
.vertical {
writing-mode: vertical-lr;
text-orientation: upright;
padding-left:15px;
}
<table>
<tr>
<th>Vertical</th>
<th>Heading
</th>
</tr>
<tr>
<td>
<div class="vertical">Vertical</div>
</td>
<td>
<div class="vertical">Heading</div>
</td>
</tr>
<tr>
<td>
<div class="vertical">Vertical</div>
</td>
<td>
<div class="vertical">Heading</div>
</td>
</tr>
</table>

Answer 2

Try this, hope it will be helpful for you..
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
td {
writing-mode: vertical-lr;
text-orientation: upright;
}
<table style="width:100%">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>55577854</td>
<td>55577855</td>
</tr>
</table>

Answer 3

If you have the option to add custom html, you can just use linebreaks.
table{
width: 100%;
}
<table>
<tr>
<td>V<br>e<br>r<br>t<br>i<br>c<br>a<br>l</td>
<td>H<br>e<br>a<br>d<br>i<br>n<br>g</td>
</tr>
</table>
Otherwise I am afraid you will be looking at a JavaScript based solution. Something like this:
window.addEventListener( 'load', () => {
let verticals = document.querySelectorAll( 'td.vertical' );
verticals.forEach( node => {
node.innerHTML = node.innerText.replace( /./g, `$&<br>`);
});
});
table{
width: 100%;
}
<table>
<tr>
<td class="vertical">Vertical</td>
<td class="vertical">Heading</td>
</tr>
</table>