Пришлось мне создать таблицу с турами, где текст нужно располагать вертикально
Вот собственно табличка
1чт | ||||||||
2пт | ||||||||
3сб |
|
Байкальские каникулы | ||||||
4вс | ||||||||
5пн | ||||||||
6вт | ||||||||
7ср | ||||||||
8чт | Путешествие в горную страну | Очарование Байкала | Классический тур на Байкал | |||||
9пт | Листвянка - визитная карточка Байкала | Три жемчужины Байкала | ||||||
10сб | ||||||||
11вс | Экскурсионный тур на остров Ольхон | |||||||
12пн | ||||||||
13вт | ||||||||
14ср | Отдых в большом Голоустном | |||||||
15чт | Путешествие в горную страну | |||||||
16пт | Листвянка - визитная карточка Байкала | Три жемчужины Байкала | ||||||
17сб | Байкальские каникулы | |||||||
18вс | ||||||||
19пн | ||||||||
20вт | ||||||||
21ср | ||||||||
22чт | Путешествие в горную страну | Очарование Байкала | Классический тур на Байкал | |||||
23пт | Листвянка - визитная карточка Байкала | Три жемчужины Байкала | ||||||
24сб | ||||||||
25вс | Экскурсионный тур на остров Ольхон | |||||||
26пн | ||||||||
27вт | ||||||||
28ср | Отдых в большом Голоустном | |||||||
29чт | Путешествие в горную страну | |||||||
30пт | ||||||||
1сб | ||||||||
2вс |
Сложного ничего нет, нужно просто ячейкам, в которых будет повернутый текст задать стиль
-ms-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
-ms-transform-origin: left top 0;
-moz-transform-origin: left top 0;
-webkit-transform-origin: left top 0;
transform-origin: left top 0;
margin-left: 30px;
padding: 0;
float: left;
height:80px;
width:5px;
white-space: nowrap;
Самая сложность - задать этот стиль ячейкам) Приходится внутри ячейки вставлять div с классом нашим, но результат все равно конечно немного не тот.