Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5

Thread: rotate text

  1. #1
    Senior Coder
    Join Date
    May 2004
    Posts
    1,466
    Thanks
    15
    Thanked 0 Times in 0 Posts

    rotate text

    I have a table and the header row has a bunch of dates --I would like it to show the date vertical

    is this possible?

    the table has 3 regular columns first and then 30 date collums

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,743
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello esthera,
    Something like this? - http://scottgale.com/blog/css-vertical-text/2010/03/01/
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Senior Coder
    Join Date
    May 2004
    Posts
    1,466
    Thanks
    15
    Thanked 0 Times in 0 Posts
    I tried that but all the text ended up on top of each other

    I need it in it's own cell

    here is my code --now without any class set as i tried a few and it didn't work

    Code:
    <html>
    <head>
    <script src="sorttable.js"></script>
     <style>
    /* Sortable tables */
    body
    {
        font-family: verdana,arial,sans-serif;
    	font-size:11px;
    	color:#333333;
    }
    table.sortable thead {
        background-color:#eee;
        color:#666666;
        font-weight: bold;
        cursor: default;
    }
    
    table.sortable {
    	font-family: verdana,arial,sans-serif;
    	font-size:11px;
    	color:#333333;
    	border-width: 1px;
    	border-color: #a9c6c9;
    	border-collapse: collapse;
    	table-layout:fixed;
    }
    table.sortable th {
    	border-width: 1px;
    	padding: 8px;
    	border-style: solid;
    	border-color: #a9c6c9;
    	width:90px;
    	font-size:11px;
    	font-weight:bold;
    }
    table.sortable td {
    	border-width: 1px;
    	padding: 8px;
    	border-style: solid;
    	border-color: #a9c6c9;
    	width:90px;
    	text-align:center:
    }
    .oddrowcolor{
    	background-color:#d4e3e5;
    }
    .evenrowcolor{
    	background-color:#c3dde0;
    }
    
    
    .red
    {
     
     font-weight:bold;
     color:Red;   
    }
    
    table.sortable2 thead {
        background-color:#eee;
        color:#666666;
        font-weight: bold;
        cursor: default;
    }
    
    table.sortable2 {
    	font-family: verdana,arial,sans-serif;
    	font-size:11px;
    	color:#333333;
    	border-width: 1px;
    	border-color: #a9c6c9;
    	border-collapse: collapse;
    	table-layout:fixed;
    }
    table.sortable2 th {
    	border-width: 1px;
    	padding: 8px;
    	border-style: solid;
    	border-color: #a9c6c9;
    	width:110px;
    	font-size:11px;
    	font-weight:bold;
    }
    table.sortable2 td {
    	border-width: 1px;
    	padding: 8px;
    	border-style: solid;
    	border-color: #a9c6c9;
    	width:110px;
    }
    .redbg
    {
        background-color:Red;
    }
    
    .yellowbg
    {
         background-color:yellow;
    }
     .element{
    	color:#333;
    	border:0px solid red;
    	writing-mode:tb-rl;
    	-webkit-transform:rotate(90deg);
    	-moz-transform:rotate(90deg);
    	-o-transform: rotate(90deg);
    	white-space:nowrap;
    	display:block;
    	bottom:0;
    	width:20px;
    	height:20px;
    	font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
    	font-size:24px;
    	font-weight:normal;
    	text-shadow: 0px 0px 1px #333;
    }
    .rotated_cell
          {
             height:300px;
             vertical-align:bottom
          }
    </style>
    
    </head>
    
    <body>
    
    
    
    <table class=sortable><tr><th>code</th><th>23/12/2012</th><th>24/12/2012</th><th>25/12/2012</th><th>26/12/2012</th><th>27/12/2012</th><th>28/12/2012</th><th>29/12/2012</th><th>30/12/2012</th><th>31/12/2012</th><th>01/01/2013</th><th>02/01/2013</th><th>03/01/2013</th><th>04/01/2013</th><th>05/01/2013</th><th>06/01/2013</th><th>07/01/2013</th><th>08/01/2013</th><th>09/01/2013</th><th>10/01/2013</th><th>11/01/2013</th><th>12/01/2013</th><th>13/01/2013</th><th>14/01/2013</th><th>15/01/2013</th><th>16/01/2013</th><th>17/01/2013</th><th>18/01/2013</th><th>19/01/2013</th><th>20/01/2013</th><th>21/01/2013</th><th>22/01/2013</th></tr><tr><td>496</td><td align=center >1</td><td align=center  class=yellowbg>0</td><td align=center  class=yellowbg>0</td><td align=center >2</td><td align=center >1</td><td align=center >3</td><td align=center >3</td><td align=center >2</td><td align=center >1</td><td align=center >5</td><td align=center >1</td><td align=center  class=yellowbg>0</td><td align=center >4</td><td align=center >1</td><td align=center >1</td><td align=center >1</td><td align=center >4</td><td align=center  class=yellowbg>0</td><td align=center  class=yellowbg>0</td><td align=center >3</td><td align=center >4</td><td align=center  class=yellowbg>0</td><td align=center  class=yellowbg>0</td><td align=center  class=yellowbg>0</td><td align=center  class=yellowbg>0</td><td align=center  class=yellowbg>0</td><td align=center  class=yellowbg>0</td><td align=center  class=yellowbg>0</td><td align=center  class=yellowbg>0</td><td align=center  class=yellowbg>0</td><td align=center  class=yellowbg>0</td></tr><tr><td>499</td><td align=center >1</td><td align=center  class=yellowbg>0</td><td align=center  class=yellowbg>0</td><td align=center  class=yellowbg>0</td><td align=center  class=yellowbg>0</td><td align=center  class=yellowbg>0</td><td align=center  class=yellowbg>0</td><td align=center  class=yellowbg>0</td><td align=center >2</td><td align=center  class=yellowbg>0</td><td align=center >1</td><td align=center  class=yellowbg>0</td><td align=center  class=yellowbg>0</td><td align=center  class=yellowbg>0</td><td align=center  class=yellowbg>0</td><td align=center  class=yellowbg>0</td><td align=center  class=yellowbg>0</td><td align=center  class=yellowbg>0</td><td align=center  class=yellowbg>0</td><td align=center  class=yellowbg>0</td><td align=center  class=yellowbg>0</td><td align=center  class=yellowbg>0</td><td align=center >1</td><td align=center >2</td><td align=center >1</td><td align=center >2</td><td align=center  class=yellowbg>0</td><td align=center  class=yellowbg>0</td><td align=center  class=yellowbg>0</td><td align=center  class=yellowbg>0</td><td align=center  class=yellowbg>0</td></tr><tr><td>500</td><td align=center >2</td><td align=center  class=yellowbg>0</td><td align=center  class=yellowbg>0</td><td align=center  class=yellowbg>0</td><td align=center  class=yellowbg>0</td><td align=center  class=yellowbg>0</td><td align=center  class=yellowbg>0</td><td align=center  class=yellowbg>0</td><td align=center  class=yellowbg>0</td><td align=center  class=redbg>0</td><td align=center  class=yellowbg>0</td><td align=center  class=yellowbg>0</td><td align=center  class=yellowbg>0</td><td align=center  class=yellowbg>0</td><td align=center  class=yellowbg>0</td><td align=center  class=yellowbg>0</td><td align=center  class=yellowbg>0</td><td align=center  class=yellowbg>0</td><td align=center  class=yellowbg>0</td><td align=center  class=yellowbg>0</td><td align=center  class=yellowbg>0</td><td align=center  class=yellowbg>0</td><td align=center  class=yellowbg>0</td><td align=center  class=yellowbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td></tr><tr><td>503</td><td align=center  class=yellowbg>0</td><td align=center >1</td><td align=center  class=yellowbg>0</td><td align=center  class=yellowbg>0</td><td align=center >2</td><td align=center >3</td><td align=center >3</td><td align=center  class=yellowbg>0</td><td align=center >3</td><td align=center  class=yellowbg>0</td><td align=center >1</td><td align=center >5</td><td align=center >6</td><td align=center  class=yellowbg>0</td><td align=center >1</td><td align=center >2</td><td align=center >2</td><td align=center >6</td><td align=center >3</td><td align=center >1</td><td align=center >2</td><td align=center >3</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td></tr><tr><td>506</td><td align=center  class=yellowbg>0</td><td align=center  class=yellowbg>0</td><td align=center  class=yellowbg>0</td><td align=center  class=yellowbg>0</td><td align=center  class=yellowbg>0</td><td align=center  class=yellowbg>0</td><td align=center  class=yellowbg>0</td><td align=center  class=yellowbg>0</td><td align=center  class=yellowbg>0</td><td align=center  class=yellowbg>0</td><td align=center  class=yellowbg>0</td><td align=center  class=yellowbg>0</td><td align=center  class=yellowbg>0</td><td align=center  class=yellowbg>0</td><td align=center  class=yellowbg>0</td><td align=center  class=yellowbg>0</td><td align=center >1</td><td align=center  class=yellowbg>0</td><td align=center  class=yellowbg>0</td><td align=center  class=yellowbg>0</td><td align=center  class=yellowbg>0</td><td align=center  class=yellowbg>0</td><td align=center  class=yellowbg>0</td><td align=center  class=yellowbg>0</td><td align=center  class=yellowbg>0</td><td align=center  class=yellowbg>0</td><td align=center >1</td><td align=center  class=yellowbg>0</td><td align=center  class=yellowbg>0</td><td align=center  class=yellowbg>0</td><td align=center  class=yellowbg>0</td></tr><tr><td>507</td><td align=center  class=yellowbg>0</td><td align=center >3</td><td align=center  class=yellowbg>0</td><td align=center  class=yellowbg>0</td><td align=center  class=yellowbg>0</td><td align=center >2</td><td align=center >3</td><td align=center >2</td><td align=center >1</td><td align=center  class=yellowbg>0</td><td align=center  class=yellowbg>0</td><td align=center  class=yellowbg>0</td><td align=center >1</td><td align=center >1</td><td align=center  class=yellowbg>0</td><td align=center >2</td><td align=center >2</td><td align=center  class=yellowbg>0</td><td align=center  class=yellowbg>0</td><td align=center >1</td><td align=center >1</td><td align=center  class=yellowbg>0</td><td align=center  class=yellowbg>0</td><td align=center  class=yellowbg>0</td><td align=center >1</td><td align=center >2</td><td align=center  class=yellowbg>0</td><td align=center  class=yellowbg>0</td><td align=center  class=yellowbg>0</td><td align=center  class=yellowbg>0</td><td align=center  class=yellowbg>0</td></tr><tr><td>508</td><td align=center >2</td><td align=center >1</td><td align=center  class=yellowbg>0</td><td align=center >2</td><td align=center >3</td><td align=center >2</td><td align=center  class=yellowbg>0</td><td align=center  class=yellowbg>0</td><td align=center >1</td><td align=center >2</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=yellowbg>0</td><td align=center  class=yellowbg>0</td><td align=center  class=yellowbg>0</td><td align=center  class=yellowbg>0</td><td align=center  class=yellowbg>0</td><td align=center  class=yellowbg>0</td><td align=center  class=yellowbg>0</td><td align=center  class=yellowbg>0</td><td align=center  class=yellowbg>0</td><td align=center  class=yellowbg>0</td><td align=center  class=yellowbg>0</td><td align=center  class=yellowbg>0</td><td align=center  class=yellowbg>0</td><td align=center  class=yellowbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td></tr><tr><td>517</td><td align=center >4</td><td align=center >1</td><td align=center >4</td><td align=center >4</td><td align=center >5</td><td align=center >1</td><td align=center >1</td><td align=center >7</td><td align=center >2</td><td align=center >10</td><td align=center >2</td><td align=center  class=yellowbg>0</td><td align=center  class=yellowbg>0</td><td align=center  class=yellowbg>0</td><td align=center  class=yellowbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td></tr><tr><td>522</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td></tr><tr><td>527</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td></tr><tr><td>528</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td></tr><tr><td>531</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td></tr><tr><td>537</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td><td align=center  class=redbg>0</td></tr></table>
    
    
    </body></html>

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,743
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by esthera View Post
    I tried that but all the text ended up on top of each other

    I need it in it's own cell

    here is my code --now without any class set as i tried a few and it didn't work
    So, that page I linked you to recommends some pretty questionable CSS.

    Look at it this way once -
    Code:
     .sortable th{
      height: 100px;
    	color:#333;
    	writing-mode:tb-rl;
    	-webkit-transform:rotate(90deg);
    	-moz-transform:rotate(90deg);
    	-o-transform: rotate(90deg);
    	
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    Senior Coder
    Join Date
    May 2004
    Posts
    1,466
    Thanks
    15
    Thanked 0 Times in 0 Posts
    works in firefox but the date headers don't show in ie
    and i can't make the td width small


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •