Using the following code, and inspired by this question, I managed to have vertical column headers in an HTML table, compatible with Internet Explorer. Now the last detail I need to set is the header vertical alignement : I'd like to have my headers fixed to the bottom of their row.
$(document).ready(function(){
$('tr th div').each(function (index, div){
R = Raphael($(div).attr('id'), 10, 200);
R.text(5, 100, $(div).find('span').text())
.rotate(-90, true);
$(div).find('span').hide();
});
});
With this code, I am able to get this result :
(source: ompldr.org)
As you can see, the headers are rotated but not aligned to the bottom of their cells, I'd like them to be. I tried using :
vertical-align: bottom;
But that didn't change anything.
And also to add this after or before the .rotate instruction in the JS code :
.attr({'text-anchor': 'end'});
When placed before the .rotate instruction, this just made the headers disappear. When placed after the .rotate instruction, I had better results, but still not what I want, as the headers are vertically aligned based on their last character :
Vertical Align Attempt http://ompldr.org/vZnhiOQ
How could I align these headers to the bottom of the first row, in order to get such result ?
Thanks,
Hugo
Instead of
.attr({'text-anchor': 'end'});
before the rotation, use this one to align the text at its start
.attr({'text-anchor': 'start'});