0

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

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

我有一个问题：它只出现了几个垂直文本的字母。为什么？

在这里您可以看得更清楚：示例

非常感谢您的帮助！

4

2 回答 2

1

这似乎是一个奇怪的表格布局，我不确定用例。因此，我不确定它需要多么灵活，但添加它来th span修复您的示例：

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

此外，添加vertical-align: middle;到其包含的th.

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

于 2013-10-06T16:38:47.887 回答
0

删除overflow: hidden包含“Hi Everyone”的div，它隐藏了其余的字母。

<th style="color:red; height:200px; vertical-align:bottom" width="20">
     <span>
        <div style="width:100%;height:100%;">Hi everybody</div>
     </span>
</th>

然后添加vertical-align: middle到父级<th>，我还必须添加一个负边距以使“大家好”以匹配中心，因为文本字符串从centre origin.

小提琴：http: //jsfiddle.net/m7nfU/24/

于 2013-10-06T16:38:54.357 回答