Member Avatar for phalen

good morning...

i did a search for this, and didnt find what i needed to see.

i have a table with over 40 columns, i need them to align the text vertically like this:

t
a
b
l
e

h
e
a
d
e
r

is there a way to do this with html, css or php?

i dont want to double post - so i'm asking if there's a way to do this in those three languages

i hope someone can help with this.

thanks

  • 5 Contributors
  • 6 Replies
  • 272 Views
  • 3 Weeks Discussion Span
  • Latest Post Latest Post by chmac

Dani AI

Generated

A short, practical summary that updates the thread with modern, robust options and compatibility notes.

For selectable, accessible vertical headers (recommended): use standard CSS writing modes together with text-orientation so Latin letters stay upright. This preserves copy/paste, search and screen-reader access, and lets the browser do layout instead of images or letter-by-letter markup. Example CSS and markup:

/* vertical header — modern/accessible approach */
th.vertical {
  writing-mode: vertical-rl;
  text-orientation: upright;
  white-space: nowrap;
  padding: 6px;
}
<th class="vertical">Average Length</th>

The transform-based approach is a useful alternative when you want the whole label rotated (sideways) instead of true vertical flow. Wrap the text in an inline element, rotate it, and adjust transform-origin and spacing so it doesn’t clip:

/* rotated header — good fallback/alternative */
th.rotated > span {
  display: inline-block;
  transform: rotate(-90deg);
  transform-origin: left top;
  white-space: nowrap;
  padding: 4px;
}
<th class="rotated"><span>Average Length</span></th>

Notes, trade-offs and compatibility:

  • Prefer the writing-mode + text-orientation approach when possible: it keeps text selectable and accessible. MDN documents these properties and how they behave. (developer.mozilla.org)
  • The rotate/transform approach is widely supported and flexible for layout adjustments; see the CSS transform guide. (developer.mozilla.org)
  • Current browser support for writing-mode/text-orientation is broad in modern browsers; if you must support very old UAs, provide a graceful fallback (server-side letter breaks or rotated images), but be aware images of text harm accessibility and searchability as and already discussed. Prefer CSS-first and fall back only when necessary. (caniuse.com)

Practical tips: fix header cell height, center with vertical-align, or give rotated content extra padding so adjacent rows don’t overlap. Tie these styles into your table-generation (server or template) so headers render cleanly for wide tables instead of forcing horizontal scrolling. References above give implementation and compatibility details.

Recommended Answers

All 6 Replies

Member Avatar for tgreer

I don't think so. I'd like to be pleasantly surprised to the contrary by another poster, but my first reaction is "no".

Member Avatar for Troy

phalen, you asked if there was a solution using either HTML, CSS, or PHP.

In HTML, you simply just insert <BR /> after each letter. For example, if you had a table header containing the text "Average Length":

<th>
  A<br />v<br />e<br />r<br />a<br />g<br />e
  <br /><br />
  L<br />e<br />n<br />g<br />t<br />h
</th>

There is a CSS solution--sort of. This effect is not exactly what you mentioned, and it did not work in Firefox when I tested. It did work in IE.

<th style="writing-mode:tb-rl;filter: flipv fliph;">Average Length</th>

Finally, you mentioned PHP. The only thing PHP (or any other scripting language) is going to help you with in this situation is to dynamically break a string into individual characters and output each with a <br /> after it. So you could create a PHP function that when passed "Average Length", returns "A<br />v<br />e<br />r<br />a<br />g<br />e<br />&nbsp;<br />L<br />e<br />n<br />g<br />t<br />h".

Enjoy the journey. :)

Member Avatar for phalen

thanks :) i got another solution too :) - it also uses the writing mode, and i used it in dynamic tables - saved me from scrolling left-right thru over 60 columns :D

<*style type=text/css">
.vert{
left:1px;
top:5px;
width:1px;
writing-mode: tb-rl;
}
</*style>

<span class="vert">this will be displayed vertically now</span>

Member Avatar for chmac

Hi Phalen,

Did you get that to work in firefox or just IE? I'm trying to rotate some text in table headings and having difficulty in firefox.

Cheers - chmac.

--
Blog: http://www.callum-macdonald.com/
Gallery:

Member Avatar for bkendall

I actually have another solution to rotating text.

I have recently done a project where I needed to make text for an envelope vert and I ran across a server software package that dynamically takes the text turns it into a graphic and then spins it and outputs it on the page. http://www.imagemagick.org/ the best news it that it is free.

Member Avatar for chmac

I actually have another solution to rotating text.

I have recently done a project where I needed to make text for an envelope vert and I ran across a server software package that dynamically takes the text turns it into a graphic and then spins it and outputs it on the page. http://www.imagemagick.org/ the best news it that it is free.

It's an option, although it has a number of drawbacks, particularly in my situation. I want to be able to copy and paste the data to Excel for further manipulation, which wouldn't work with images. It also disables searching, accessibility, etc, etc.

However, for purely visual purposes, it's a good option, and definitely a site worth bookmarking.

chmac.

--
Blog: http://www.callum-macdonald.com/
Gallery:

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.