There are cases, when preparing a table with a large amount of content, that you would like to configure your layout to be most efficient - a useful trick is to rotate the content in some table cells, or in the table headers. Rotating by 90° might be a way to achieve this, but readability suffers. A reasonable compromise is to rotate 45° only - the space it needs is not more than with a 90° rotation, and your readers don't have to tilt their heads repeatedly. In the following example we shall rotate table headers by 45°.
The rotation is achieved with transform: rotate().
It could be applied directly to the th element, but it is impossible
to configure the width of the column as we wish it. We shall thus nest a div
and a span element:
<th class="rotate">
<div>
<span>Column header 1</span>
</div>
</th>
The rotation will happen with the following CSS code:
th.rotate {
/* Make sure the th is high enough, */
height: 150px;
/* and make sure the words of the header are not split with a newline. */
white-space: nowrap;
}
th.rotate > div {
transform:
/* Magic Numbers to put it in place, */
translate(25px, 50px)
/* rotate it, */
rotate(-45deg);
/* and give the div the width you wish. */
width: 30px;
}
th.rotate > div > span {
/* And finally, add some styling. */
border-bottom: 1px solid #ccc;
padding: 5px 10px;
}
A more basic means for rotation, allowing for less fine-tuning, is the use of the
writing-mode CSS property. This option only allows rotation by
90°. It can be very handy when only some table cells with too much content are rotated,
so as not to use too much horizontal space. You cannot rotate the table cell directly,
so you have to nest one span element inside - and then you style it:
td.rotate > span {
/* Rotate the content */
writing-mode: vertical-rl;
/* Optionally, you can force the table cell's content not to wrap */
white-space: nowrap;
}
For a different approach to rotating content, see the section on Printing wide content sideways.