Web Design

Only members of this group can post notes and use other group resources. Join now to get access to all group resources!
Log in or register to join this group

Cascade Style Sheet (CSS)  Rotating text vertically in HTML table  Viewed 19231 time(s), 2 post(s)., 1/6/2014 1:44:23 AM - by Jack

Jack
Jack 1/6/2014 1:44:23 AM

Is there a way to rotate the text inside <td> cell 90 degrees?

This content has not been rated yet. 
31 Reputation 2 Total posts
1
Sam
Sam 1/6/2014 1:47:15 AM

I found this code. I hope it will help

<!DOCTYPE html>
<html lang="en">
<head>
 
<meta charset="utf-8">
 
<title>CSS rotation test</title>
 
<style>
body {
   background-color:rgb(241,241,241);
  }
#text {
   position:relative;
   width:50px;
   height:170px;
   border:1px solid rgba(0,0,0,0.5);
   border-radius:7px;
   margin:20px auto;
   background-color:rgb(255,255,255);
   box-shadow:inset 0 0 10px rgba(0,0,0,0.6),
                    0 0 10px rgba(0,0,0,0.6);
  }
#text span {
   position:absolute;
   width:170px;
   line-height:50px;
   left:0;
   top:100%;
   transform:rotate(-90deg);
   -webkit-transform:rotate(-90deg);
   transform-origin:0 0;
   -webkit-transform-origin:0 0;
   text-align:center;
   color:rgb(48,48,48);
  }
</style>
 
</head>
<body>
 
<div id="text">
  <span>Lorem ipsum</span>
</div>
 
</body>
</html>

This content has not been rated yet. 
233 Reputation 37 Total posts
2