html - 是否可以保证表头中的垂直文本？

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 或 div 中。 Support seems pretty decent 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>