display vertical text in table headers with auto height - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Table Height

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

Description

display vertical text in table headers with auto height

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">
.vrtheader th div {
   writing-mode:vertical-lr;<!--from  w w  w. j av a  2 s . co m-->
   min-width:51px;
}
</style> 
 </head> 
 <body> 
  <table class="vrtheader"> 
   <thead> 
    <tr> 
     <th> 
      <div>
        Lorem i 
      </div> </th> 
     <th>Lorem </th> 
     <th>Lorem</th> 
    </tr> 
   </thead> 
   <tbody> 
    <tr> 
     <td>Lor</td> 
     <td>Lor</td> 
     <td>Lor</td> 
    </tr> 
    <tr> 
     <td>Lor</td> 
     <td>Lor</td> 
     <td>Lor</td> 
    </tr> 
    <tr> 
     <td>Lor</td> 
     <td>Lor</td> 
     <td>Lor</td> 
    </tr> 
   </tbody> 
  </table>  
 </body>
</html>

Related Tutorials