在不增加寬度或列的情況下在桌面內旋轉圖像

Question

通過固定桌面寬度旋轉圖像。

DEMO

請看演示。列的寬度應該在30px左右，但不能反射，因爲圖片寬度（旋轉後）會更多。

想擁有一個旋轉的圖像，仍然保持一個小的寬度（旋轉圖像的寬度將融入TD輕鬆，但無法做出這等）

試了幾種方法，無法獲得所需的結果。任何幫助表示讚賞。

代碼

<div class="bs-example"> 
<table class="table"> 
    <thead> 
    <tr> 
     <th>#</th> 
     <th class="rotate"><image src="http://example.com/NKV2Yt" height="20" /></th> 
     <th class="rotate"><image src="http://example.com/NKV2Yt" height="20" /></th> 
     <th class="rotate"><image src="http://example.com/NKV2Yt" height="20" /></th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td>1</td> 
     <td>M</td> 
     <td>O</td> 
     <td>@</td> 
    </tr> 
    <tr> 
     <td>2</td> 
     <td>J</td> 
     <td>T</td> 
     <td>@</td> 
    </tr> 
    <tr> 
     <td>3</td> 
     <td>L</td> 
     <td>t</td> 
     <td>@</td> 
    </tr> 
    </tbody> 
</table> 
</div><!-- /example --> 

CSS ==>

th{ 
    height:200px; 
    width:30px !important; 
} 
.rotate{ 
    -webkit-transform: rotate(-90deg); /* Chrome, Safari 3.1+ */ 
-moz-transform: rotate(-90deg); /* Firefox 3.5-15 */ 
    -ms-transform: rotate(-90deg); /* IE 9 */ 
    -o-transform: rotate(-90deg); /* Opera 10.50-12.00 */ 
     transform: rotate(-90deg); /* Firefox 16+, IE 10+, Opera 12.10+ */ 
} 

Answer 1

我已經遇到這個問題我自己之前。唯一的解決辦法我發現包裹中的圖像另一種元素，給予一個相對位置和絕對位置的圖像，以該元素

table{ 
    margin: 20px 0 0 30px;} 
tr,td,th{ 
    border: 1px solid; 
} 
th{ 
    height:100px; 
    width:30px; 
} 
.rotate img { 
    -webkit-transform: rotate(-90deg); /* Chrome, Safari 3.1+ */ 
    -moz-transform: rotate(-90deg); /* Firefox 3.5-15 */ 
     -ms-transform: rotate(-90deg); /* IE 9 */ 
     -o-transform: rotate(-90deg); /* Opera 10.50-12.00 */ 
      transform: rotate(-90deg); /* Firefox 16+, IE 10+, Opera 12.10+ */ 

} 

.rotate span { 
    position:relative; 
    width:30px; 
    height:100px; 
    display:block; 
} 

.rotate span img { 
    position: absolute; 
    left:-15px; 
    top:50px 
} 

在跨度的包裹你的圖片

<th class="rotate"><span><image src="http://goo.gl/NKV2Yt" height="20" /></span></th> 

更新例子在這裏http://cssdeck.com/labs/tnbuiyv8

Answer 2

嘗試max-width爲th

max-width: 30px;