Vertical (rotated) text in HTML table

1:09:00 PM Mahesh Kumar Yadav 1 Comments


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 <td>.
Vertical (rotated) text in HTML table

<style>
 .box_rotate
{
 -moz-transform: rotate(270deg);  /* FF3.5+ */
 -o-transform: rotate(270deg);  /* Opera 10.5 */
 -webkit-transform: rotate(270deg);  /* Saf3.1+, Chrome */
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083);  /* IE6,IE7 */
 -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)"; /* IE8 */
}
</style>
Use in html table like;
<table>
<tr>
 <td class="box_rotate">30kg</td>
<td></td>
<td></td>
</tr>
<tr>
<td class="box_rotate">20kg</td>
<td></td>
<td></td>
</tr>
<tr>
<td class="box_rotate">10kg</td>
<td></td>
<td></td>
</tr>
</table>

Author Profile

I'm a Web Designer and Web Developer from Kathmandu, Nepal. In 2012, I completed MSc. in Information Technology (IT) from the central department of computer science (CDCSIT), Kirtipur, Kathmandu, Nepal.

You Might Also Like

1 comment :

  1. natalsabelMarch 5, 2022 at 2:33 PM

    Stainless Steel Razor Matte Chrome Razor with Leather
    Stainless Steel Razor Matte Chrome Razor with Leather Case for Blades · Case titanium hair will last 7 titanium wheels months · Steel razor implant grade titanium earrings Matte titanium easy flux 125 and Leather Case · Case blue titanium cerakote will last 3 months · Stainless Steel

    ReplyDelete

Subscribe to: Post Comments ( Atom )