旋转HTML表格单元格180度

Question

例如,我有下表,并希望像其他表一样旋转它.我怎样才能做到这一点？反正没有javascript？

在轮换之前

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

旋转后

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

目视

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

Answer 1

您可以使用CSS3转换:

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

请参阅: http ://jsfiddle.net/thirtydot/gE5sV/

浏览器支持:http://caniuse.com/transforms2d

从上面的链接可以看出,CSS3转换在IE8及更早版本中不起作用.你可以使用它filter,但它会使文本看起来很糟糕,所以我不推荐它:

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