Question

这不是问题我只是觉得花了这么多时间搞清楚如何做到这一点我会讨厌自己，如果我不把它保存在某个地方，如果我没有分享我找到的东西，我将是一个糟糕的程序员。（在这里一石二鸟。）

所以这里是用于在表格中旋转文本作为标题的代码。

<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>

在表格中将文本旋转为标题（跨浏览器）

0 个答案: