Vertically rotate text inside an HTML table header cell - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Table Cell

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Table Cell

Description

Vertically rotate text inside an HTML table header cell

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
table#MyTable {<!-- w  w  w .  j av a 2  s .  c  om-->
   -moz-transform:rotate(-91deg);
   -webkit-transform:rotate(-91deg);
   -o-transform:rotate(-91deg);
   writing-mode:tb-rl;
   filter:flipv fliph;
}

table#MyTable tr th a {
   color:Chartreuse;
   display:block;
   border:2px solid yellow;
}

th {
   border:2px solid blue;
}

body {
   margin:31px
}
</style> 
 </head> 
 <body> 
  <table id="MyTable"> 
   <tbody> 
    <tr> 
     <th> <a href="#">Lo</a> <a href="#">Lorem</a> <a href="#">Lorem ipsu</a> </th> 
    </tr> 
   </tbody> 
  </table>  
 </body>
</html>

Related Tutorials