Sometimes in complex tables with lots of columns you will run into the problem of the headers being too wide and causing the table to stretch beyond the available width. One solution is to use vertical text to render the headers.
It is easy to achieve this using images, but by doing so you lose the benefits of text: selectable, resizable, easier to style and update and easier to dynamically generate.
With the future CSS transform attribute it is possible to rotate text to become vertical. Current browsers already provide support for this:
div.vertical
{
/* Safari/Chrome */
-webkit-transform: rotate(-90deg);
/* Firefox */
-moz-transform: rotate(-90deg);
/* Opera */
-o-transform: rotate(-90deg);
}
For Internet Explorer it is done in a different way:
div.vertical
{
/* Internet Explorer */
writing-mode: tb-rl;
filter: flipv fliph;
}
There are some caveats though. Browsers usually apply the transform at the end, so we have to take this into account and adjust the width/height accordingly. If you don't adjust the size, the width/height of the container will be the same as if the text wasn't rotated.
In the case of a table we will use a div inside each table cell so we have more control to style the outcome.
<table>
<thead>
<tr>
<th class="vertical"><div class="vertical">Really long and complex title 1</div></th>
<th class="vertical"><div class="vertical">Really long and complex title 2</div></th>
<th class="vertical"><div class="vertical">Really long and complex title 3</div></th>
</tr>
</thead>
<tbody>
<tr>
<td>Example</td>
<td>a, b, c</td>
<td>1, 2, 3</td>
</tr>
(...)
</tbody>
</table>
Due to the differences in rendering between IE and the others browsers we will use two different stylesheets.
For IE:
div.vertical
{
position: relative;
height: 210px;
width: 45px;
margin-left: 0;
padding-right: 10px;
writing-mode: tb-rl;
filter: flipv fliph;
}
th.vertical
{
padding-bottom: 10px;
vertical-align: bottom;
}
For the other browsers:
div.vertical
{
margin-left: -85px;
position: absolute;
width: 210px;
/* Safari/Chrome */
-webkit-transform: rotate(-90deg);
/* Firefox */
-moz-transform: rotate(-90deg);
/* Opera */
-o-transform: rotate(-90deg);
}
th.vertical
{
height: 220px;
line-height: 14px;
padding-bottom: 20px;
text-align: left;
}
Here is a screenshot of the final result:
You can download the final code here: vertical-text.zip (1,07 KB).
PS: If you open the file locally with IE it will display a warning because of the filter that's being used. You can enable it without problems. That warning is not displayed if you place the files in a server.