我想在表格标题上显示垂直文本;标头具有固定的高度。我也想隐藏溢出。

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


我有一个问题:它仅显示垂直文本的几个字母。为什么?

在这里您可以看到更好的结果:Example

非常感谢您的帮助!

最佳答案

这似乎是一个奇怪的表布局,我不确定用例。因此,我不确定它的灵活性如何,但是将其添加到th span可以解决您的示例:

width: 200px;
text-align: center;
margin-left: -90px;


另外,将vertical-align: middle;添加到其包含的th

http://jsfiddle.net/m7nfU/22/

07-24 09:39