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:
<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>
This question is related to
css
html
html-table
The answer is
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.
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_
}<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>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.
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.
Without calculating height. Strict CSS and HTML. <span/> only for Chrome, because the chrome isn't able change text direction for <th/>.
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_
}<table>_x000D_
<tr>_x000D_
<th><span>Rotated text by 90 deg.</span></th>_x000D_
</tr>_x000D_
</table>Source: Stackoverflow.com