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在这里有帮助，但您需要将文本换行thinspan或div. 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>