How to rotate the text 90 degrees to the left, and the cell size is adjusted according to the text in html

Question

Suppose I have a table with several rows and a column, so I want to rotate the text in the cells like this:

Problem

is when i rotate the 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’s all messed up like this,

html code:

 <table cellpadding="0" cellspacing="0" align="center"> <tr> <td id='rotate'>10kg</td> <td >B</td> <td >C</td> <td>D</td> <td>E</td> </tr> <tr> <td id='rotate'>20kg</td> <td>G</td> <td>H</td> <td>I</td> <td>J</td> </tr> <tr> <td id='rotate'>30kg</td> <td>L</td> <td>M</td> <td>N</td> <td>O</td> </tr> </table> 

CSS

 <style type="text/css"> 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 */ } </style> 

Answer 1

This can be done by applying CSS rotation to the inner element and then adjusting the height of the element according to its width, since the element has been rotated to fit it in the <td> .

Also make sure you change your id #rotate to a class as you have several.

 $(document).ready(function() { $('.rotate').css('height', $('.rotate').width()); }); 

 td { border-collapse: collapse; border: 1px black solid; } tr:nth-of-type(5) td:nth-of-type(1) { visibility: hidden; } .rotate { /* FF3.5+ */ -moz-transform: rotate(-90.0deg); /* Opera 10.5 */ -o-transform: rotate(-90.0deg); /* Saf3.1+, Chrome */ -webkit-transform: rotate(-90.0deg); /* IE6,IE7 */ filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=0.083); /* IE8 */ -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)"; /* Standard */ transform: rotate(-90.0deg); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table cellpadding="0" cellspacing="0" align="center"> <tr> <td> <div class='rotate'>10kg</div> </td> <td>B</td> <td>C</td> <td>D</td> <td>E</td> </tr> <tr> <td> <div class='rotate'>20kg</div> </td> <td>G</td> <td>H</td> <td>I</td> <td>J</td> </tr> <tr> <td> <div class='rotate'>30kg</div> </td> <td>L</td> <td>M</td> <td>N</td> <td>O</td> </tr> </table> 

Javascript

The equivalent above in pure JavaScript is as follows:

jsFiddle

 window.addEventListener('load', function () { var rotates = document.getElementsByClassName('rotate'); for (var i = 0; i < rotates.length; i++) { rotates[i].style.height = rotates[i].offsetWidth + 'px'; } }); 

Answer 2

Daniel Imms is great for applying CSS rotation to an internal element. However, you can achieve the ultimate goal in a way that does not require JavaScript and works with longer lines of text .

As a rule, the whole reason for having vertical text in the first column of the table is to correspond to a long line of text in a short horizontal space and go next to high rows of content (as in your example) or several rows of content (which I will use in this example).

Using the “.rotate” class in the parent TD tag, we can not only rotate the internal DIV, but we can also set several CSS properties in the parent TD tag, which will force all text to remain on one line and keep the width up to 1.5em. Then we can use some negative margins on the inner DIV to make sure it is well centered.

 td { border: 1px black solid; padding: 5px; } .rotate { text-align: center; white-space: nowrap; vertical-align: middle; width: 1.5em; } .rotate div { -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 */ margin-left: -10em; margin-right: -10em; } 

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

One thing to keep in mind is that it does not work if the height of the line (or stretched lines) is shorter than the vertical text in the first column . It works best if you span multiple lines or you have a lot of content creating high lines.

Have fun playing with it on jsFiddle .

Answer 3

Unfortunately, while I thought that these answers might have worked for me, I struggled with the solution as I use tables inside react tables - where overflow-x is playing.

So, with that in mind, take a look at this link for a cleaner way that doesn't have width overflow problems. In the end, it worked for me and was very easy to implement.

https://css-tricks.com/rotated-table-column-headers/

Answer 4

No height calculation. Strict CSS and HTML. <span/> only for Chrome, because chrome cannot change the direction of text for <th/> .

HTML:

 <table> <tr> <th><span>Rotated text by 90 deg.</span></th> </tr> </table> 

CSS

 th { vertical-align:bottom; text-align:center; } th span { -ms-writing-mode: tb-rl; -webkit-writing-mode:vertical-rl; writing-mode: vertical-rl; transform:rotate(180deg); white-space: nowrap; }