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