Tuesday, June 19, 2012

Vertical text using CSS in table


<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'>vertical text</div>
         </td>
      </tr>
      <tr><td>1</td><td>1</td><td>1</td></tr>
      <tr><td>2</td><td>2</td><td>2</td></tr>
      <tr><td>3</td><td>3</td><td>3</td></tr>
      <tr><td>4</td><td>4</td><td>4</td></tr>
   </table>
</body>
</html>

No comments:

Post a Comment