html - 高さが固定された表に縦書きのテキストを表示するにはどうすればよいですか?

Question

テーブルのヘッダーに縦書きのテキストを表示したい。ヘッダーの高さは固定です。そして、オーバーフローも隠したいです。

私のhtmlは次のとおりです。

<table border='1px solid black'>
 <thead>
  <tr style='font-weight:bold; color:blue'>
   <td width="60"> Data </td>
   <td width="35"> Voto </td>
   <td width="50"> Tipo </td>
   <td width="10"> I </td>
   <th style="color:red; height:200px; vertical-align:bottom" width="20">
    <span>
      <div style="width:100%;height:100%;overflow:hidden;"> Hi everybody </div>
    </span>
   </th>
   <td> Annotazioni </td>
  </tr>
 </thead>
</table>

そして私のCSS：

table
    {
        border-collapse:collapse;
        table-layout: fixed;
        width: 400px;
    }      

th span {

      writing-mode: tb-rl;
      filter: flipv fliph;
      -webkit-transform:rotate(-90deg); 
      white-space:nowrap; 
      display:block;
    }

問題があります。縦書きの文字が数文字しか表示されません。なんで？

ここでよくわかります:例

ご助力ありがとうございます！