是否可以保证表格标题中的垂直文本？

Question

2019年，在没有任何技巧和变通方法的情况下，仍然有可能在html表标题中制作垂直文本吗？

我尝试过

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>

得到

1）背景发生了变化

2）水平宽度未变窄

3）空单元格是异常值

4）字体损坏

对于现代浏览器，是否有保证获得正常行为的垂直文本的方法？

Answer 1

writing-mode在这里有帮助，但是您需要在th或span的{​​{1}}中换行。 Support seems pretty decent在2019年：-）

div

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;
            }