Sat, 2014-09-20 18:51
I want to rotate a text inside a table cell. How can I do it? I used transform:rotate(-90deg); and did many tests but I always have the same problem. Please check the picture here:
http://www.fileswap.com/dl/3yYaOcrC46/table_rotate_text_error01.png.html
It looks like the box model error but with text not divs…
PS: Guys please answer ASAP because I’m in a hurry.
Thank you!
Sat, 2014-09-20 20:30
#1
table layout fixed to set fixed width cells
html:
<table> <tr> <td colspan="7">Week 1</td> <td colspan="7">Week 2</td> </tr> <tr class="sw"> <td class="sw">Monday</td> <td class="sw">Tuesday</td> <td class="sw">Wednesday</td> <td class="sw">Thursday</td> <td class="sw">Friday</td> <td class="sw">Saturday</td> <td class="sw">Sunday</td> <td class="sw">Monday</td> <td class="sw">Tuesday</td> <td class="sw">Wednesday</td> <td class="sw">Thursday</td> <td class="sw">Friday</td> <td class="sw">Saturday</td> <td class="sw">Sunday</td> </tr> <tr> <td>0</td> <td>1</td> <td>0</td> <td>1</td> <td>0</td> <td>1</td> <td>0</td> <td>1</td> <td>0</td> <td>1</td> <td>0</td> <td>1</td> <td>0</td> <td>1</td> </tr> </table>
css:
body { font-size : 12px; } td { border: 1px solid #d4d4d4; } table { table-layout: fixed; width:800px; } td.sw { -ms-transform: rotate(-90deg); /* IE 9 */ -webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */ transform:rotate(-90deg); overflow : visible; } tr.sw { height: 50px; }
jsfiddle:
http://jsfiddle.net/fatpfqhq/2/
Sat, 2014-09-20 21:31
#2
I still have a bug.
Thanks for trying. Though I still have a problem. Now it's like this:
http://www.fileswap.com/dl/h4K5YhIdBj/table_rotate_text_error02.png.html
Sun, 2014-09-21 13:27
#3
Problem solved
I did more tests and I solved it. The problem was that I didn't add position:relative and transform-origin:0 0; from the beginning. Now it works fine. Thank you for your help.
Mon, 2014-09-22 16:43
#4
Rotate text inside table cell
css code:
.rotate{transform: rotate(360deg);}
html code:
<td class="rotate">text for rotation<td>