Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

How can i orient table cell data in vertical direction(rotated thru 90 degrees)?

Posted on 2003-04-01
7
Medium Priority
?
607 Views
Last Modified: 2008-02-20
I got to display a very wide report on the web. I am on the look out to reduce horizontal scrolling as much as possible. towards this end I am thinking of vertical orientation of data( ie horizontal text rotated through 90 degrees). Can anione pls help
0
Comment
Question by:ashams_s
  • 2
  • 2
  • 2
  • +1
7 Comments
 
LVL 14

Expert Comment

by:avner
ID: 8244108
Try this approach, thorugh it is IE only, for a cross browser solution use images :

<html>
<head>
<title>about:blank</title>
<script language="javascript1.2">
<!-- copyright(c) avcoh@yahoo.com
window.onload=  function()
{
document.getElementById("ver").style.filter="progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
}
-->
</script>
</head>
<body>
<div>regular text</div>
<div style="position:relative;height:100px;" id="ver">vertical text</div>


</body>
</html>
0
 
LVL 3

Accepted Solution

by:
hexagon47 earned 400 total points
ID: 8244723
an alternative you can make it facing left or facing right

<html>
<head>
<style>
.verticalBaseRight { writing-mode: tb-rl;
filter:   flipH() flipV();
}
.verticalBaseLeft
{ writing-mode: tb-rl;
}
</style>


</head>
<body>

<span class="verticalBaseRight">
verticaltext
</span>

<span class="verticalBaseLeft">
verticaltext
</span>

</body>
</html>
0
 
LVL 3

Expert Comment

by:hexagon47
ID: 8244725
an alternative you can make it facing left or facing right

<html>
<head>
<style>
.verticalBaseRight { writing-mode: tb-rl;
filter:   flipH() flipV();
}
.verticalBaseLeft
{ writing-mode: tb-rl;
}
</style>


</head>
<body>

<span class="verticalBaseRight">
verticaltext
</span>

<span class="verticalBaseLeft">
verticaltext
</span>

</body>
</html>
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 

Author Comment

by:ashams_s
ID: 8244995
Thanks a ton hexagon. u r my mate..It worked!! there ends my prob!
0
 
LVL 14

Expert Comment

by:avner
ID: 8245004
If you are satisfied, select the comment as answer to award the points.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 8963842
This question has been classified abandoned. I will make a recommendation to the
moderators on its resolution in a week or two. I appreciate any comments
that would help me to make a recommendation.

<note>
Unless it is clear to me that the question has been answered I will recommend delete.  It is possible that a Grade less than A will be given if no expert makes a case for an A grade. It is assumed that any participant not responding to this request is no longer interested in its final disposition.
</note>

If the user does not know how to close the question, the options are here:
http://www.experts-exchange.com/help/closing.jsp


Cd&
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 9114598
It is time to clean this abandoned question up.

I am putting it on a clean up list for CS.

<recommendation>
points to hexagon47

</recommendation>

If anyone participating in the Q disagrees with the recommendation,
please leave a comment for the mods.

Cd&

0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Suggested Courses

580 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question