Rotate table headers

bolemeus

I'm trying to rotate the table headers in a datatables with complex headers, because the column names are significantly longer than the contents of an individual cell. These contain simple radio buttons.

Sofar I've tried to apply the following css rule to the column headers, but that only rotates the header cell without resizing the datatable itself.

-webkit-transform: rotate(-90deg);

This results in pretty much thesame width of the datatable, with the exception of the header cell awkwardly overlapping other cells.

To clarify, I want to accomplish something like this.

        <thead>
            <tr>
                <th rowspan="2">Name</th>
                <th colspan="2">HR Information</th>
                <th colspan="3">Contact</th>
            </tr>
            <tr>
                <th class="rotate">Position</th>
                <th class="rotate">Salary</th>
                <th class="rotate">Office</th>
                <th class="rotate">Extn.</th>
                <th class="rotate">E-mail</th>
            </tr>
        </thead>

Any ideas?