Question

I have a td table field with a designated width of 20px and a height of 200px. I have the word “previous” inside this td. This text is rotated 90 degrees. t

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

My css (less) is as follows:

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

            }
        }
    }

It appears that the width of the td is being overwritten by the length of its text–the longer the text, the wider the td. It looks as though the text’s length is recorded horizontally, then the td width is set, then the text is rotated. I’ve tried adding !important to the width of the td, but the td still adjusts with the text’s length. Any ideas?

Answer 1

Replace your CSS with this

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

DEMO http://jsfiddle.net/ddxVM/