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