Vertical Text in a Table

Question

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?

Have you read over [CSS/text-orientation](https://developer.mozilla.org/en-US/docs/Web/CSS/text-orientation)? Might be helpful — B001ᛦ, Nov 28 '19 at 11:37

Sunil R. · Answer 1 · 2019-11-28T11:54:28.783

1

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>

edited Nov 28 '19 at 11:54

answered Nov 28 '19 at 11:41

Sunil R.

753
6
13

How is this supposed to be helping here? It 's just showing horizontally – B001ᛦ Nov 28 '19 at 11:56
@B001ᛦ which browser do you use ? because it works, , what got mistaken is the cells selector, td instead th .... but the op provided an example with TD. – G-Cyrillus Nov 28 '19 at 12:52
I use `Chrome 78.0.3904.108 ` – B001ᛦ Nov 28 '19 at 13:16
Thanks. The widths are wrong, but I can hack that. I was looking at the wrong place, transforms instead of Vertical Text. – Tuntable Nov 29 '19 at 00:16
Actually sideways-lr is what I wanted. I never did figure out how to get it top to bottom, but close enough. – Tuntable Nov 29 '19 at 00:48

Rob Monhemius · Answer 2 · 2019-11-28T12:34:45.120

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>

Well yes, that is what I had done. But it does not look very good! But thanks for the suggestion. — Tuntable, Nov 29 '19 at 00:12

score 1 · Accepted Answer · answered Nov 28 '19 at 12:18

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>

answered Nov 28 '19 at 12:18

Omi

3,544
5
18
38

Nice. Please be aware of browser support of the Edge browser however: https://caniuse.com/#search=text-orientation. That said, it does look like they will support `text-orientation` in the future ;). – Rob Monhemius Nov 28 '19 at 13:05
Could you elaborate why the `writing mode` and `text-orientation` css-properties do not work on a node with `display: table-cell`? – Rob Monhemius Nov 28 '19 at 13:10
Thanks. The Div does not seem to fix the width problem, but I can hack that. I was looking at the wrong place, transforms instead of Vertical Text. – Tuntable Nov 29 '19 at 00:11
Actually sideways-lr is what I wanted. I never did figure out how to get it top to bottom, but close enough. – Tuntable Nov 29 '19 at 00:48

Vertical Text in a Table

3 Answers3