Is it possible to guarantee vertical text in table header?

Question

Year 2019, isn't it still possible to make vertical text in html table header without any tricks and workarounds?

I tried

 table th.vertical { text-align: center; white-space: nowrap; transform-origin: 50% 50%; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); } table th.vertical:before { content: ''; padding-top: 110%; /* takes width as reference, + 10% for faking some extra padding */ display: inline-block; vertical-align: middle; } 

 <table> <tbody> <tr> <th class="vertical">&nbsp;</th> <th class="vertical">&nbsp;</th> <th class="vertical">2016/02/28-21:40</th> <th class="vertical">2016/05/10-08:20</th> <th class="vertical">&nbsp;</th> </tr> <tr> <th class="vertical">&nbsp;</th> <th class="vertical">&nbsp;</th> <th class="vertical">2016/03/02-07:00</th> <th class="vertical">2016/05/12-20:30</th> <th class="vertical">&nbsp;</th> </tr> <tr> <th>28/02/2016-00:00</th> <th>29/02/2016-00:00</th> <td class="tp">tp</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <th>10/05/2016-00:00</th> <th>11/05/2016-00:00</th> <td>&nbsp;</td> <td class="tp">tp</td> <td>&nbsp;</td> </tr> <tr> <th>09/06/2016-00:00</th> <th>10/06/2016-00:00</th> <td>&nbsp;</td> <td>&nbsp;</td> <td class="fn">fn</td> </tr> <tr> <th>&nbsp;</th> <th>&nbsp;</th> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> </tbody> </table> 

and got

1) Background is shifted

2) Horizontal width is not narrowed

3) Empty cells are outliers

4) Fonts are corrupted

Is there a guaranteed way to get normal well-behaving vertical text for modern browsers?

Answer 1

writing-mode helps here, but you need to wrap text in th in span or div . Support seems pretty decent in 2019 :-)

 td, th {border: 1px solid black; background-color: #fee} table{border-collapse: collapse;} table th.vertical span { text-align:center; white-space:nowrap; -ms-writing-mode: vertical-rl; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; } 

 <table> <tbody><tr> <th class="vertical">&nbsp;</th> <th class="vertical">&nbsp;</th> <th class="vertical"><span>2016/02/28-21:40</span></th> <th class="vertical"><span>2016/05/10-08:20</span></th> <th class="vertical">&nbsp;</th> </tr> <tr> <th class="vertical">&nbsp;</th> <th class="vertical">&nbsp;</th> <th class="vertical"><span>2016/03/02-07:00</span></th> <th class="vertical"><span>2016/05/12-20:30</span></th> <th class="vertical">&nbsp;</th> </tr> <tr> <th>28/02/2016-00:00</th> <th>29/02/2016-00:00</th> <td class="tp">tp</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <th>10/05/2016-00:00</th> <th>11/05/2016-00:00</th> <td>&nbsp;</td> <td class="tp">tp</td> <td>&nbsp;</td> </tr> <tr> <th>09/06/2016-00:00</th> <th>10/06/2016-00:00</th> <td>&nbsp;</td> <td>&nbsp;</td> <td class="fn">fn</td> </tr> <tr> <th>&nbsp;</th> <th>&nbsp;</th> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> </tbody></table>