设置<th>当单元格包含旋转（垂直）文本时在css中的单元格宽度

我试图修复包含旋转文本的单元格的宽度。除了前3列以外，其余部分只需稍微超过垂直文本字体的高度。剩下的空间可以在前三列之间平分。设置<th>当单元格包含旋转（垂直）文本时在css中的单元格宽度

我试过设置在CSS的单元格的宽度，但它没有什么区别...

这里有一个例子http://jsfiddle.net/pelagic/3Ggw6/1/

HTML

<div id="galley"> 
<table> 
<thead><tr> 
    <th colspan="3" class="vertical-label">&nbsp;</th> 
    <th colspan="11"><div>Regions</div></th> 
    <th width="5%" class="vertical-label">&nbsp;</th> 
</tr> 
    <tr> 
    <th width="5%" class="vertical-label"><div class="vheader"> 
     <div align="left">One</div> 
    </div></th> 
    <th width="5%" class="vertical-label"><div class="vheader"> 
     <div align="left">One</div> 
    </div></th> 
    <th width="5%" class="vertical-label"><div class="vheader"> 
     <div align="left">One</div> 
    </div></th> 
    <th width="10" class="vertical-label"><div class="vheader"> 
     <div align="left">Antarctic</div> 
    </div></th> 
    <th width="5%" class="vertical-label"><div class="vheader"> 
     <div align="left">Arctic</div> 
    </div></th> 
    <th width="5%" class="vertical-label"><div class="vheader"> 
     <div align="left">Baltic&nbsp;Sea</div> 
    </div></th> 
    <th width="5%" class="vertical-label"><div class="vheader"> 
     <div align="left">Black&nbsp;Sea</div> 
    </div></th> 
    <th width="5%" class="vertical-label"><div class="vheader"> 
     <div align="left">Cas&#8226;pian&nbsp;Sea</div> 
    </div></th> 
    <th width="5%" class="vertical-label"><div class="vheader"> 
     <div align="left">Indo&nbsp;Pacific</div> 
    </div></th> 
    <th width="30" class="vertical-label"><div class="vheader"> 
     <div align="left">Mediterranean&nbsp;Sea</div> 
    </div></th> 
    <th width="5%" height="150" class="vertical-label"><div class="vheader"> 
     <div align="left">North&nbsp;Atlantic</div> 
    </div></th> 
    <th width="5%" height="150" class="vertical-label"><div class="vheader"> 
     <div align="left">North&nbsp;Pacific</div> 
    </div></th> 
    <th width="5%" height="150" class="vertical-label"><div class="vheader"> 
     <div align="left">South&nbsp;Atlantic</div> 
    </div></th> 
    <th width="auto" height="150" class="vertical-label"><div class="vheader"> 
     <div align="left">South&nbsp;Pacific</div> 
    </div></th> 
    <th width="5%" class="vertical-label"><div class="vheader"> 
     <div align="left">References</div> 
    </div></th> 
    </tr> 
</thead> 
<tfoot></tfoot> 
<tbody><tr><td>Otariidae</td> 
<td>Arctocephalus pusillus</td> 
<td>Cape or Australian fur seal</td> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp; </td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr> 
<tr class="alt"><td>&nbsp;</td><td>Arctophoca gazella</td> 
<td>Antarctic fur seal</td> 
<td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr> 
<tr><td>&nbsp;</td><td>A. tropicalis</td> 
<td>Subantarctic fur seal</td> 
<td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr> 
</tbody> 
</table> 
</div>

CSS

#galley { 
    width: 738px; 
height: auto; 
border: 1px #CCCCCC; 
float:none 
} 

#galley table, th, td { 
border: 1px solid black; 
border-collapse:collapse; 
} 

#galley table { 
table-layout: fixed; 
width: 738px; 
} 

#galley th.vertical-label{  
-webkit-transform: rotate(270deg) translateX(100%) translateY(33%); 
-moz-transform: rotate(270deg) translateX(100%) translateY(33%); 
-o-transform: rotate(270deg) translateX(100%) translateY(33%); 
-webkit-transform-origin: 100% 100%; 
-moz-transform-origin: 100% 100%; 
-o-transform-origin: 100% 100%; 
writing-mode: lr-tb; 
} 

#galley th, th.vertical-label{ 
font-family: "myriad Pro"; 
font-decoration: bold; 

} 

#galley .vheader{ 
margin-left: 5px; 
}

来源

2014-04-11 user3506709

允许您的单元格从其内容增长，免除旋转的单元格，您需要确保旋转后的文本不会扩展单元格。

它们可以设置为绝对值或几乎减少，并具有负值。

如果利润率为负值，则不需要空间。但是您需要单元格垂直增长，为此，请在％中使用垂直填充的伪元素。

DEMO与

播放的方法：

这将绘制一个正方形直到它到达999px X 2的宽度，高度将其将不再需要的水平空间根据其宽度生长：

td div.text-rotated { 
margin-:0 -999px; 
} 
td div.text-rotated:before { 
padding-top:100%; 
content:''; 
display:inline-block; 
}

其他可能性与naive menu

来源

2014-04-11 12:57:12

设置<th>当单元格包含旋转（垂直）文本时在css中的单元格宽度

回答

相关问题