Rotated text in table headers

[Synchro]

If I add a rotation class like -rotate-90 to table header classes, they rotate, but their spacing and bounding boxes do not go with them, so it just makes a mess. My markup is like this:

<th scope="col" class="text-right -rotate-90">January</th>

and it renders like this:

The column widths are set by the length of the month label (even though the length is no longer the width!), similarly the height has remained as the original text height, so the labels spill over into the row below, and are cropped off at the top. The th tags also have text-right applied, but they have become centred vertically.

I saw some suggestions to apply rotations to a nested div so the table cell would change itself to fit, but this made no difference:

<th scope="col" class="text-right">
<div class="-rotate-90">January</div>
</th>

How can I rotate these labels and get control of their bounding boxes and alignment?

[wongjn]

You could try using writing-mode instead of rotate().

[Synchro]

Thanks, I gave that a try, and it's a slight improvement:

It expands the row height so that the labels fit, however, I can't persuade it (I tried all modes for this property) to rotate the other way (-90° instead of 90°), and none of the usual text alignment classes seem to do anything, so the labels are stuck at centre bottom (from the rotated perspective).

Also this approach only works with the nested div; setting it on the th itself does nothing.

[goertzenator]

A rotate 180 will fix the direction. It can be used with writing-mode.

[sambauers]

If you nest the text in a div or possibly a span, and set a static column width on the table you can manually control this. You may also want to explore different transform origins to get the positioning and alignment right - https://tailwindcss.com/docs/transform-origin

[Synchro]

Thanks, I have finally got it to work, but it's quite painful!

<tr>
                        <th scope="col" class="text-left whitespace-nowrap h-32 pb-4 align-bottom">Item</th>
                        @foreach ($months as $month)
                            <th scope="col" class="whitespace-nowrap w-16 h-32 pb-4">
                                <div class="origin-right text-left -rotate-90 w-16 pb-4">{{ $month }}</div>
                            </th>
                        @endforeach
                        <th scope="col" class="whitespace-nowrap w-16 h-40 pb-4">
                            <div class="origin-right text-left -rotate-90 w-16 font-bold pb-4">Grand Total</div>
                        </th>
                    </tr>