将文本旋转为表格中的标题(跨浏览器)

这不是一个问题。 我只是觉得,花了这么多的时间去思考如何做到这一点,如果我不把它保存在某个地方,我会恨自己,如果我没有分享我发现的东西,我会是一个糟糕的程序员。 (这里一石二鸟)

所以这里是代表旋转表中的文本作为标题。

<html> <head> <!--[if IE]> <style> .rotate_text { writing-mode: tb-rl; filter: flipH() flipV(); } </style> <![endif]--> <!--[if !IE]><!--> <style> .rotate_text { -moz-transform:rotate(-90deg); -moz-transform-origin: top left; -webkit-transform: rotate(-90deg); -webkit-transform-origin: top left; -o-transform: rotate(-90deg); -o-transform-origin: top left; position:relative; top:20px; } </style> <!--<![endif]--> <style> table { border: 1px solid black; table-layout: fixed; width: 69px; /*Table width must be set or it wont resize the cells*/ } th, td { border: 1px solid black; width: 23px; } .rotated_cell { height:300px; vertical-align:bottom } </style> </head> <body> <table border='1'> <tr> <td class='rotated_cell'> <div class='rotate_text'>Test1</div> </td> <td class='rotated_cell'> <div class='rotate_text'>TEST2</div> </td> <td class='rotated_cell'> <div class='rotate_text'>WOOOOOOOOOOOOOOOOHOOOOOO</div> </td> </tr> <tr><td>X</td><td>X</td><td>X</td></tr> <tr><td>X</td><td>X</td><td>X</td></tr> <tr><td>X</td><td>X</td><td>X</td></tr> <tr><td>X</td><td>X</td><td>X</td></tr> </table> </body> </html>