Решение, которое работает на FF, CH и IE
Это то, что я закончил с и работает довольно хорошо в разных основных браузерах (FF, CH и IE). Я протестировал его в IE8, и он работал, и он также работает в IE9. Так что здесь для дальнейшего использования, если вам может понадобиться это самостоятельно:
- Я использую не таблицы, а плавающие DIV
- Каждая ячейка является отдельным DIV с заголовком
- Заголовки повернули текст
Повернутый текст по-прежнему сохраняет размеры до преобразования, поэтому лучше всего содержать его в другом элементе, который фактически дает ему вертикально эквивалентное измерение. Таким образом, другой поток контента не прерывается.
Это упрощенный HTML-код:
<div class="head">
<div class="vert">Vertical text example</div>
</div>
и сопровождающий CSS:
.container .head
{
/* float your elements or inline-block them to display side by side */
float: left;
/* these are height and width dimensions of your header */
height: 10em;
width: 1.5em;
/* set to hidden so when there's too much vertical text it will be clipped. */
overflow: hidden;
/* these are not relevant and are here to better see the elements */
background: #eee;
margin-right: 1px;
}
.container .head .vert
{
/* line height should be equal to header width so text will be middle aligned */
line-height: 1.5em;
/* setting background may yield better results in IE text clear type rendering */
background: #eee;
display: block;
/* this will prevent it from wrapping too much text */
white-space: nowrap;
/* so it stays off the edge */
padding-left: 3px;
/* IE specific rotation code */
writing-mode: tb-rl;
filter: flipv fliph;
/* CSS3 specific totation code */
/* translate should have the same negative dimension as head height */
transform: rotate(270deg) translate(-10em,0);
transform-origin: 0 0;
-moz-transform: rotate(270deg) translate(-10em,0);
-moz-transform-origin: 0 0;
-webkit-transform: rotate(270deg) translate(-10em,0);
-webkit-transform-origin: 0 0;
}