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>