how to rotate text left 90 degree and cell size is adjusted according to text in html

Question

Suppose i have table with some rows and column so i want to rotate text in cells something like this    problem is  when i rotate text using style     rotate        -moz-transform  rotate -90 0deg       FF3 5            -o-transform  rotate -90 0deg       Opera 10 5      -webkit-transform  rotate -90 0deg       Saf3 1   Chrome                 filter   progid DXImageTransform Microsoft BasicImage rotation 0 083       IE6 IE7             -ms-filter   progid DXImageTransform Microsoft BasicImage rotation 0 083       IE8      it all get messed up like this  html code    lt table cellpadding  0  cellspacing  0  align  center  gt       lt tr gt           lt td id  rotate  gt 10kg lt  td gt           lt td  gt B lt  td gt           lt td  gt C lt  td gt           lt td gt D lt  td gt           lt td gt E lt  td gt       lt  tr gt       lt tr gt           lt td id  rotate  gt 20kg lt  td gt           lt td gt G lt  td gt           lt td gt H lt  td gt           lt td gt I lt  td gt           lt td gt J lt  td gt       lt  tr gt       lt tr gt           lt td id  rotate  gt 30kg lt  td gt           lt td gt L lt  td gt           lt td gt M lt  td gt           lt td gt N lt  td gt           lt td gt O lt  td gt       lt  tr gt     lt  table gt    css    lt style type  text css  gt  td       border-collapse collapse      border  1px black solid    tr nth-of-type 5  td nth-of-type 1        visibility  hidden     rotate        -moz-transform  rotate -90 0deg       FF3 5            -o-transform  rotate -90 0deg       Opera 10 5      -webkit-transform  rotate -90 0deg       Saf3 1   Chrome                 filter   progid DXImageTransform Microsoft BasicImage rotation 0 083       IE6 IE7             -ms-filter   progid DXImageTransform Microsoft BasicImage rotation 0 083       IE8       lt  style gt

User · Answer

Daniel Imms answer is excellent in regards to applying your CSS rotation to an inner element. However, it is possible to accomplish the end goal in a way that does not require JavaScript and works with longer strings of text.

Typically the whole reason to have vertical text in the first table column is to fit a long line of text in a short horizontal space and to go alongside tall rows of content (as in your example) or multiple rows of content (which I'll use in this example).

By using the ".rotate" class on the parent TD tag, we can not only rotate the inner DIV, but we can also set a few CSS properties on the parent TD tag that will force all of the text to stay on one line and keep the width to 1.5em. Then we can use some negative margins on the inner DIV to make sure that it centers nicely.

_x000D_

td {_x000D_
    border: 1px black solid;_x000D_
    padding: 5px;_x000D_
}_x000D_
.rotate {_x000D_
  text-align: center;_x000D_
  white-space: nowrap;_x000D_
  vertical-align: middle;_x000D_
  width: 1.5em;_x000D_
}_x000D_
.rotate div {_x000D_
     -moz-transform: rotate(-90.0deg);  /* FF3.5+ */_x000D_
       -o-transform: rotate(-90.0deg);  /* Opera 10.5 */_x000D_
  -webkit-transform: rotate(-90.0deg);  /* Saf3.1+, Chrome */_x000D_
             filter:  progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083);  /* IE6,IE7 */_x000D_
         -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)"; /* IE8 */_x000D_
         margin-left: -10em;_x000D_
         margin-right: -10em;_x000D_
}

_x000D_

<table cellpadding="0" cellspacing="0" align="center">_x000D_
    <tr>_x000D_
        <td class='rotate' rowspan="4"><div>10 kilograms</div></td>_x000D_
        <td>B</td>_x000D_
        <td>C</td>_x000D_
        <td>D</td>_x000D_
        <td>E</td>_x000D_
    </tr>_x000D_
    <tr>_x000D_
        <td>G</td>_x000D_
        <td>H</td>_x000D_
        <td>I</td>_x000D_
        <td>J</td>_x000D_
    </tr>_x000D_
    <tr>_x000D_
        <td>L</td>_x000D_
        <td>M</td>_x000D_
        <td>N</td>_x000D_
        <td>O</td>_x000D_
    </tr>_x000D_
    <tr>_x000D_
        <td>Q</td>_x000D_
        <td>R</td>_x000D_
        <td>S</td>_x000D_
        <td>T</td>_x000D_
    </tr>_x000D_
    _x000D_
    <tr>_x000D_
        <td class='rotate' rowspan="4"><div>20 kilograms</div></td>_x000D_
        <td>B</td>_x000D_
        <td>C</td>_x000D_
        <td>D</td>_x000D_
        <td>E</td>_x000D_
    </tr>_x000D_
    <tr>_x000D_
        <td>G</td>_x000D_
        <td>H</td>_x000D_
        <td>I</td>_x000D_
        <td>J</td>_x000D_
    </tr>_x000D_
    <tr>_x000D_
        <td>L</td>_x000D_
        <td>M</td>_x000D_
        <td>N</td>_x000D_
        <td>O</td>_x000D_
    </tr>_x000D_
    <tr>_x000D_
        <td>Q</td>_x000D_
        <td>R</td>_x000D_
        <td>S</td>_x000D_
        <td>T</td>_x000D_
    </tr>_x000D_
    _x000D_
    <tr>_x000D_
        <td class='rotate' rowspan="4"><div>30 kilograms</div></td>_x000D_
        <td>B</td>_x000D_
        <td>C</td>_x000D_
        <td>D</td>_x000D_
        <td>E</td>_x000D_
    </tr>_x000D_
    <tr>_x000D_
        <td>G</td>_x000D_
        <td>H</td>_x000D_
        <td>I</td>_x000D_
        <td>J</td>_x000D_
    </tr>_x000D_
    <tr>_x000D_
        <td>L</td>_x000D_
        <td>M</td>_x000D_
        <td>N</td>_x000D_
        <td>O</td>_x000D_
    </tr>_x000D_
    <tr>_x000D_
        <td>Q</td>_x000D_
        <td>R</td>_x000D_
        <td>S</td>_x000D_
        <td>T</td>_x000D_
    </tr>_x000D_
    _x000D_
</table>

_x000D_

One thing to keep in mind with this solution is that it does not work well if the height of the row (or spanned rows) is shorter than the vertical text in the first column. It works best if you're spanning multiple rows or you have a lot of content creating tall rows.

Have fun playing around with this on jsFiddle.

User · Answer

You can do that by applying your rotate CSS to an inner element and then adjusting the height of the element to match its width since the element was rotated to fit it into the  lt td gt    Also make sure you change your id  rotate to a class since you have multiple      x000D   x000D    document  ready function     x000D        rotate   css  height       rotate   width     x000D      x000D  td   x000D    border-collapse  collapse  x000D    border  1px black solid  x000D    x000D  tr nth-of-type 5  td nth-of-type 1    x000D    visibility  hidden  x000D    x000D   rotate   x000D       FF3 5     x000D    -moz-transform  rotate -90 0deg   x000D       Opera 10 5    x000D    -o-transform  rotate -90 0deg   x000D       Saf3 1   Chrome    x000D    -webkit-transform  rotate -90 0deg   x000D       IE6 IE7    x000D    filter  progid  DXImageTransform Microsoft BasicImage rotation 0 083   x000D       IE8    x000D    -ms-filter   progid DXImageTransform Microsoft BasicImage rotation 0 083    x000D       Standard    x000D    transform  rotate -90 0deg   x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt table cellpadding  0  cellspacing  0  align  center  gt  x000D     lt tr gt  x000D       lt td gt  x000D         lt div class  rotate  gt 10kg lt  div gt  x000D       lt  td gt  x000D       lt td gt B lt  td gt  x000D       lt td gt C lt  td gt  x000D       lt td gt D lt  td gt  x000D       lt td gt E lt  td gt  x000D     lt  tr gt  x000D     lt tr gt  x000D       lt td gt  x000D         lt div class  rotate  gt 20kg lt  div gt  x000D       lt  td gt  x000D       lt td gt G lt  td gt  x000D       lt td gt H lt  td gt  x000D       lt td gt I lt  td gt  x000D       lt td gt J lt  td gt  x000D     lt  tr gt  x000D     lt tr gt  x000D       lt td gt  x000D         lt div class  rotate  gt 30kg lt  div gt  x000D       lt  td gt  x000D       lt td gt L lt  td gt  x000D       lt td gt M lt  td gt  x000D       lt td gt N lt  td gt  x000D       lt td gt O lt  td gt  x000D     lt  tr gt  x000D   x000D   x000D   lt  table gt  x000D   x000D   x000D    JavaScript  The equivalent to the above in pure JavaScript is as follows   jsFiddle  window addEventListener  load   function          var rotates   document getElementsByClassName  rotate        for  var i   0  i  lt  rotates length  i              rotates i  style height   rotates i  offsetWidth    px

User · Answer

Unfortunately while I thought these answers may have worked for me  I struggled with a solution  as I m using tables inside responsive tables - where the overflow-x is played with   So  with that in mind  have a look at this link for a cleaner way  which doesn t have the weird width overflow issues  It worked for me in the end and was very easy to implement   https   css-tricks com rotated-table-column-headers

User · Answer

Without calculating height  Strict CSS and HTML   lt span  gt  only for Chrome  because the chrome isn t able change text direction for  lt th  gt     x000D   x000D  th  x000D    x000D    vertical-align  bottom  x000D    text-align  center  x000D    x000D   x000D  th span  x000D    x000D    -ms-writing-mode  tb-rl  x000D    -webkit-writing-mode  vertical-rl  x000D    writing-mode  vertical-rl  x000D    transform  rotate 180deg   x000D    white-space  nowrap  x000D    x000D   lt table gt  x000D     lt tr gt  x000D       lt th gt  lt span gt Rotated text by 90 deg  lt  span gt  lt  th gt  x000D     lt  tr gt  x000D   lt  table gt  x000D   x000D   x000D

[css] how to rotate text left 90 degree and cell size is adjusted according to text in html

Examples related to css

Examples related to html

Examples related to html-table