CODEWITHSUNDEEP
csstransformrotatetransform
DJ Howarth
DJ Howarth

Reputation: 582

How to change dimensions with Vertical Text using Transform Rotate

How do I rotate the text vertically and change the dimensions of the border at the same time?

Using "display: inline-block;" will scrunch everything into 1 column.

http://jsfiddle.net/d3ud6/8/

/*display: inline-block;*/
overflow:hidden;
white-space:nowrap;
width:1.5em;
height: 1.5;
transform: rotate(270deg);
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);

Upvotes: 0

Views: 90

Answers (1)

dwitvliet
dwitvliet

Reputation: 7671

You can put the text inside a div and rotate it. Then set the border of the columns as you wish (see updated fiddle):

#rotate th div {
    white-space:nowrap;
    width: 20px;
    transform: translate(0px, 60px) rotate(270deg);
    -webkit-transform: translate(0px, 60px) rotate(270deg);
    -moz-transform: translate(0px, 60px) rotate(270deg);
    -ms-transform: translate(0px, 60px) rotate(270deg);
    -o-transform: translate(0px, 60px) rotate(270deg);
}
#rotate th {
    border: 1px solid green;
    height: 150px;
    max-width: 1.5em;
    overflow: hidden;
}

Upvotes: 1

Related Questions