Vertical Text in a Table [duplicate]

Question 1

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?

Question 2

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>

Question 3

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>

Question 4

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>

Leave a Comment Cancel reply