Tek-Tips is the largest IT community on the Internet today!
Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!
-
Congratulations derfloh on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
rotate text in a tablecell 90°
- Thread starter Smarty
- Start date
See this page from cian's site: . Unfortunately it only works in IE. If you want a cross-browser solution you'll probably have to create the rotated headings as images.
-- Chris Hunt
-- Chris Hunt
WartookMan
Technical User
Try using a filter to rotate it - IE 5.5+:
Pete.
Web Developer / CMS (Aptrix / LWWCM) Consultant
w: e: Pete.Raleigh(at)lclimited.co.uk
Pete.
Web Developer / CMS (Aptrix / LWWCM) Consultant
w: e: Pete.Raleigh(at)lclimited.co.uk
WartookMan
Technical User
Sorry... thought you wanted images. Mental Note: Re-read the question BEFORE posting. ![[blush]](/data/assets/smilies/blush.gif "[blush] [blush]")
Pete.
Web Developer / CMS (Aptrix / LWWCM) Consultant
w: e: Pete.Raleigh(at)lclimited.co.uk
Pete.
Web Developer / CMS (Aptrix / LWWCM) Consultant
w: e: Pete.Raleigh(at)lclimited.co.uk
BillyRayPreachersSon
Programmer
You could easily fake it to work in all browsers by using a span with a very small width:
The reason I've put SPAN tags inside the TD tag is so that you can mix and match horizontal and vertical text (see row 3 of the above demo).
As you can see, the only proviso to this working, is thta you have to put spaces after each letter in your vertical titles.
Works fine in IE6, Opera 7, NN 7, and Mozilla 1.5... Will most likely work on most browsers, I'd say.
Hope this helps!
Dan
Code:
<HTML>
<HEAD></HEAD>
<BODY>
<TABLE WIDTH="75%" CELLPADDING="1" CELLSPACING="0" BORDER="1">
<TR>
<TD WIDTH="20%"> </TD>
<TD WIDTH="40%">X Text 1</TD>
<TD WIDTH="40%">X Text 2</TD>
</TR>
<TR>
<TD><SPAN STYLE="width:1px;display:block;">Y T e x t 1<SPAN></TD>
<TD> </TD>
<TD> </TD>
</TR>
<TR>
<TD><SPAN STYLE="width:1px;display:block;">Y T e x t 2</SPAN></TD>
<TD> </TD>
<TD> </TD>
</TR>
<TR>
<TD>Y Text 3</TD>
<TD> </TD>
<TD> </TD>
</TR>
</TABLE>
</BODY>
</HTML>The reason I've put SPAN tags inside the TD tag is so that you can mix and match horizontal and vertical text (see row 3 of the above demo).
As you can see, the only proviso to this working, is thta you have to put spaces after each letter in your vertical titles.
Works fine in IE6, Opera 7, NN 7, and Mozilla 1.5... Will most likely work on most browsers, I'd say.
Hope this helps!
Dan
Dan, he wants to rotate the text through 90° so that it reads up or down the page instead of across - as can be seen on the page I linked to (if you use IE to view it!).
For your method, you might as well do this:
[tt]
<td>T<br>e<br>x<br>t<br>1</td>
[/tt]
It'll have the same effect and work on all possible browsers.
-- Chris Hunt
For your method, you might as well do this:
[tt]
<td>T<br>e<br>x<br>t<br>1</td>
[/tt]
It'll have the same effect and work on all possible browsers.
-- Chris Hunt
- Thread starter
- #7
- Status
Similar threads
- Locked
- Question
- Locked
- Question
- Locked
- Question
