表td寬度被內部文本覆蓋

Question

我有一個td表字段，指定寬度爲20px，高度爲200px。我在這個td裏面有「previous」這個詞。這段文字旋轉了90度。噸

<table id="next-arrow"> 
    <tr> 
     <td><a href="#"><span>Previous</span></a></td> 
    </tr> 
</table> 

我的CSS（少）如下：

#previous-arrow 
    { 
     position: absolute; 
     top: 600px; 
     left: @vert-out + 10; 

     td 
     { 
      height: @carousel-height; 
      width: 20px; 
      background-color: @yellow; 

      span 
      { 
       display: block; 
       -webkit-transform: rotate(-90deg); 

      } 
     } 
    } 

看來，TD的寬度是以它的文本的長度覆蓋 - 較長的文本，較寬td。它看起來好像文本的長度是水平記錄的，然後設置td寬度，然後旋轉文本。我嘗試添加！對td的寬度很重要，但td仍會根據文本的長度進行調整。有任何想法嗎？

Answer 1

與此

#next-arrow{ 
    position: absolute; 
    top: 600px; 
    left: @vert-out + 10; 
} 

#next-arrow td{ 
    height: @carousel-height; 
    max-width: 20px; 
    background-color: yellow; 
} 

#next-arrow span{ 
    display: block; 
    -webkit-transform: rotate(-90deg); 
} 

DEMOhttp://jsfiddle.net/ddxVM/

Answer 2

哇！這很快......在div中設置最大寬度，問題就解決了。 fixed`你的表類：