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

旋转HTML表格单元格180度

1 个答案: