Main menu

Пришлось мне создать таблицу с турами, где текст нужно располагать вертикально

Вот собственно табличка

{tab Июнь}
 
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 с классом нашим, но результат все равно конечно немного не тот.

Добавить комментарий


Защитный код
Обновить