Question

for example I have the table below and want to rotate it like the other table.
how can I do this? is there anyway without javascript?

before rotation

<table>
    <tr>
        <td>
            A
        </td>
        <td>
            B
        </td>
    </tr>
    <tr>
        <td>
            C
        </td>
        <td>
            D
        </td>
    </tr>
</table>

after rotation

<table>
    <tr>
        <td>
            B
        </td>
        <td>
            A
        </td>
    </tr>
    <tr>
        <td>
            D
        </td>
        <td>
            C
        </td>
    </tr>
</table>

Visually

A B        B A
C D  --->  D C

Answer 1

You can do it with a CSS3 transform:

​table, td {
    -webkit-transform: scaleX(-1);
       -moz-transform: scaleX(-1);
        -ms-transform: scaleX(-1);
         -o-transform: scaleX(-1);
            transform: scaleX(-1);
}​

See: http://jsfiddle.net/thirtydot/gE5sV/

Browser support: http://caniuse.com/transforms2d

As you can see from the above link, CSS3 transforms don’t work in IE8 and older. You can do it using filter, but it will make the text look really bad, so I don’t recommend it:

filter: progid:DXImageTransform.Microsoft.Matrix(M11=-1,M12=0,M21=0,M22=1,SizingMethod='auto expand');