How to make diagonal titles on html tables

Question

I am trying to create a HTML table with column heads, but each column head has a lengthy title. I would like to make the titles for each column at a diagonal angle. I want to know if there is css (or java, jquery, ect.) to achieve this effect that would work on all browsers (firefox, IE7 &8, ect..) and how to implement it.

Here is a visual example of what I would like to create. table with diagonal title heads

I found this on stackexchange and I couldn't figure out how to put this to good use, or determine if it even applied to what I wanted to do.

https://tex.stackexchange.com/questions/14288/how-combine-make-diagonal-column-heads-in-table-with-multicolumn-headers

Answer 1

Wrap the text you want made diagonal in another element, e.g. a <div> and then do a CSS transform on that element; see MDN.