是否可以保證表格標題中的垂直文本？

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 。 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>