CODEWITHSUNDEEP
htmlcss
ePezhman
ePezhman

Reputation: 4010

rotating HTML Table cells 180 degree

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

Upvotes: 0

Views: 1195

Answers (1)

thirtydot
thirtydot

Reputation: 228152

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');

Upvotes: 5

Related Questions