設置<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中的單元格寬度

回答

相關問題