我想在表格标题上显示垂直文本;标头具有固定的高度。我也想隐藏溢出。
我的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/