4 replies [Last post]
ainocss
ainocss's picture
Offline
newbie
Last seen: 7 years 17 weeks ago
Timezone: GMT+3
Joined: 2014-09-20
Posts: 3
Points: 4

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!

dirtslayer
dirtslayer's picture
Offline
newbie
canada
Last seen: 7 years 16 weeks ago
canada
Timezone: GMT-6
Joined: 2014-09-19
Posts: 7
Points: 7

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/

ainocss
ainocss's picture
Offline
newbie
Last seen: 7 years 17 weeks ago
Timezone: GMT+3
Joined: 2014-09-20
Posts: 3
Points: 4

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

ainocss
ainocss's picture
Offline
newbie
Last seen: 7 years 17 weeks ago
Timezone: GMT+3
Joined: 2014-09-20
Posts: 3
Points: 4

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.

VeeraM
VeeraM's picture
Offline
Enthusiast
bangalore
Last seen: 6 years 13 weeks ago
bangalore
Timezone: GMT+5.5
Joined: 2014-09-22
Posts: 59
Points: 59

Rotate text inside table cell

css code:
.rotate{transform: rotate(360deg);}

html code:
<td class="rotate">text for rotation<td>