Width of vertical(rotated) text inside table

I need to put some vertical text inside a table. The problem is that the horizontal space allocated by the table is much more than the width of the text (but is equivalent to the height of the text). How can I remove this "extra space"?. Note that the size of the font is dynamic and in general I would not use fixed size.

.LV {
    font-size: 30vw;
    vertical-align: middle;
    -webkit-transform:rotate(-90deg);
    -moz-transform:rotate(-90deg);
    -o-transform: rotate(-90deg);
}

<table style="background-color:cyan; " border="1">
    <tr>
        <td>
            <div class="LV" style="background-color:blue">
                xxxx
            </div>
        </td>
    </tr>
</table>