Hey James,
How about something like this? It's a bit heavy in the additional
markup, but it seems to do what you're looking for (at least in FF 1.5
and IE6):
CSS:
<style>
table {
border-collapse:collapse;
text-align:left;
}
th, td {
border:1px solid black;
}
table .angle {
clear:left;
float:left;
margin-left:.25em;
}
</style>
HTML:
<table>
<tr>
<th>Header 1</th>
<th>
<span class="angle">H
<span class="angle">e
<span class="angle">a
<span class="angle">d
<span class="angle">e
<span class="angle">r
<span class="angle">2
</span>
</span>
</span>
</span>
</span>
</span>
</span>
</th>
<th>Header 3</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
I hope this is helpful and not too overboard.
-Mike
James Conley wrote:
>If I wanted to have a table with one of the column headers consisting of
>a very long name how might I create them to be angled? Some of the
>different options that Google has turned up so far include
>
>- creating a picture of the angled text and positioning it on the screen
>so that it looks like the column header
>
>- creating the angled text column header using VML - Vector Markup
>Language [though I don't see an example anywhere it looks as if it is
>supported. I have never used VML].
>
>- CSS3 appears to support it
>
>- use a JavaScript function that would put each letter down and to the
>right of the previous letter to create something that looked like:
>T
> H
> I
> S
>
>While it isn't exactly "angled text" it achieves the same effect of
>saving space.
>
>Has anyone done something like this or have any thoughts or suggestions
>on it?
>
>james c
>______________________________________________________________________
>css-discuss [EMAIL PROTECTED]
>http://www.css-discuss.org/mailman/listinfo/css-d
>IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
>List wiki/FAQ -- http://css-discuss.incutio.com/
>Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
>
>
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
