css - 内部テキストによって上書きされるテーブル td 幅

Question

指定された幅 20px、高さ 200px の td テーブル フィールドがあります。この td 内に「前」という単語があります。このテキストは 90 度回転しています。t

<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 の幅に !important を追加しようとしましたが、td はテキストの長さに合わせて調整されます。何か案は？

Answer 1

CSSをこれに置き換えます

#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);
}

デモ http://jsfiddle.net/ddxVM/

Answer 2

おお！それは速かった... divで最大幅を設定すると、問題は解決されます。