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>